小虎博客

A-A+

js如何刷新当前页面

2015年09月02日 编程技术 暂无评论

最近在设计一款 php 的聊天室，是共享多人进行聊天的，功能上有些简陋，需要用到即时刷新来显示聊天内容，所以首先想到的就是 js 的刷新技术了，先将聊天的内容用 iframe 自适应高度进行包含进来，然后在包含的这个页面上进行刷新，只要控制好刷新的一个度就可以让人看不出来页面已经刷新了而正常显示聊天的内容，在设计过程中寻找了好几种 js 的刷新方式，下面小虎博客就把用到的 js 刷新当前页面给分享下来，在用到的时候可以进行直接摘取。

使用 js 中的多种方法都可以实现当前页面的刷新，比如 reload，replace 等，还有包括刷新时的状态，返回刷新，自动刷新等等，这里具体的 JS 就不去一一介绍了，如果有兴趣的话可以参考 JS 手册，小虎博客在这里主要介绍一下实例方法。

1，页面自动刷新：把如下代码加入区域中

  1. <meta http-equiv="refresh" content="20">  

这段代码的意思就是每隔 20 秒进行刷新一下当前的页面，这个值可以进行更改的。

2，页面自动跳转：把如下代码加入区域中。

  1. <meta http-equiv="refresh" content="20;url=https://www.xiaohuboke.com">  

这段的意思就是当前页面等待20秒之后跳转到 xiaohuboke.com 的页面，当然这个值也是可以更改的。

3，页面自动刷新js版，把如下代码丢到页面当中，实际上两种方法都不是 JS 的方法。

  1. <script language="JavaScript">  
  2. function myrefresh()  
  3. {  
  4.    window.location.reload();  
  5. }  
  6. setTimeout('myrefresh()',1000); //指定1秒刷新一次  
  7. </script>  

这段代码的意思就是每过一秒钟的时候进行刷新一次页面。

4，JS刷新框架的脚本语句，将下面的代码放到页面中，如下:

  1. //刷新包含该框架的页面用     
  2. <script language=JavaScript>  
  3.    parent.location.reload();  
  4. </script>  
  5. //子窗口刷新父窗口  
  6. <script language=JavaScript>  
  7.     self.opener.location.reload();  
  8. </script>  
  9. (　或　<a href="javascript:opener.location.reload()">刷新</a>   )  
  10. //刷新另一个框架的页面用     
  11. <script language=JavaScript>  
  12.    parent.另一FrameID.location.reload();  
  13. </script>  

看代码的注释应该明白，这不是刷新整个页面的，而是刷新包含在页面中的某一个框架的。

一、先来看一个简单的例子：

下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。 frame.html 由上(top.html)下(bottom.html)两个页面组成，代码如下：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
  2. <HTML>   
  3. <HEAD>   
  4. <TITLE> frame </TITLE>   
  5. </HEAD>   
  6. <frameset rows="50%,50%">   
  7. <frame name=top src="top.html">   
  8. <frame name=bottom src="bottom.html">   
  9. </frameset>   
  10. </HTML>   

现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新，可以用以下七种语句，哪个好用自己看着办了。

top.html 页面的代码如下：

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
  2. <HTML>   
  3. <HEAD>   
  4. <TITLE> top.html </TITLE>   
  5. </HEAD>   
  6. <BODY>   
  7. <input type=button value="刷新1" onclick="window.parent.frames[1].location.reload()"><br>   
  8. <input type=button value="刷新2" onclick="window.parent.frames.bottom.location.reload()"><br>   
  9. <input type=button value="刷新3" onclick="window.parent.frames['bottom'].location.reload()"><br>   
  10. <input type=button value="刷新4" onclick="window.parent.frames.item(1).location.reload()"><br>   
  11. <input type=button value="刷新5" onclick="window.parent.frames.item('bottom').location.reload()"><br>   
  12. <input type=button value="刷新6" onclick="window.parent.bottom.location.reload()"><br>   
  13. <input type=button value="刷新7" onclick="window.parent['bottom'].location.reload()"><br>   
  14. </BODY>   
  15. </HTML>   

下面是bottom.html页面源代码，为了证明下方页面的确被刷新了，在装载完页面弹出一个对话框，代码如下:

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">   
  2. <HTML>   
  3. <HEAD>   
  4. <TITLE> bottom.html </TITLE>   
  5. </HEAD>   
  6. <BODY onload="alert('我被加载了！')">   
  7. <h1>This is the content in bottom.html.</h1>   
  8. </BODY>   
  9. </HTML>   

解释一下：

1.window指代的是当前页面，例如对于此例它指的是top.html页面。

2.parent指的是当前页面的父页面，也就是包含它的框架页面。例如对于此例它指的是framedemo.html。

3.frames是window对象，是一个数组。代表着该框架内所有子页面。

4.item是方法。返回数组里面的元素。

5.如果子页面也是个框架页面，里面还是其它的子页面，那么上面的有些方法可能不行。

附：

Javascript刷新页面的几种方法：

1 history.go(0)

2 location.reload()

3 location=location

4 location.assign(location)

5 document.execCommand('Refresh')

6 window.navigate(location)

7 location.replace(location)

8 document.URL=location.href

二、自动刷新页面

1.页面自动刷新：把如下代码加入区域中

  1. <meta http-equiv="refresh" content="20">   

其中20指每隔20秒刷新一次页面.

2.页面自动跳转：把如下代码加入区域中

  1. <meta http-equiv="refresh" content="20;url=https://www.xiaohuboke.com">   

其中20指隔20秒后跳转到https://www.xiaohuboke.com页面

标签：

给我留言