A-A+

js如何刷新当前页面

2015年09月02日 前端设计 评论 21 条 阅读 191 views 次

最近在设计一款 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.xiariboke.net">  

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

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.xiariboke.net">   

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

标签:

21 条留言  访客:21 条  博主:0 条

  1. 淘宝后台修改软件

    正好用到js刷新当前页面,拿走了。

  2. 蓝沢润

    对这些不是很明白呀,但看到不少的聊天室里面都是无刷新状态的。

  3. 东莞青龙加固

    chrome 浏览器下刷新已经失效。

    • 吃吃睡睡爱谁谁

      chrome浏览器,主流浏览器。

  4. 广州电子商务网

    主要就是 reload(),loaction,location.href 这些了。

  5. 天道营销俱乐部

    返回并刷新 location.replace(document.referrer);。

  6. 昆明美女

    你这个刷新代码有点复杂了,网页直接右键刷新不好吗,呵呵。

  7. 小通

    要是网速慢的话,刷新整个页面会显得很难看,不是有哪种 ajax+php 的无刷新麽。

    • 假裝自己很帥

      ajax无刷新已经成为主流了

  8. 免费发广告网站

    直接按 F5 不就刷新了嘛,,哈哈。

    • 许大地

      这样刷新简单,还有右键刷新。

  9. 专业仿站

    很深的代码,JS用得也很频繁。

  10. 奋斗人生网

    有一小部分算是看得懂了。

    • 许大地

      不明觉厉。

  11. 高隔间

    js 自动刷新页面,网页前端经常用到的。

  12. 欣然

    像这样的 JS 代码都是现用现从网上找的,从来自己没写过。

  13. 南娜代理

    要是能实现 ajax 无刷新当前页面就好了,就是刷新的时候根本就看不出来刷新的。

    • BENSGO

      哪得需要多牛逼的服务器呀,虚拟机根本带不起来。

  14. 田埂上乡村旅游门户

    JS的刷新看来有好多种,实际上都用不到,现在网页刷新都是直接按 F5 键。

    • 司青玄

      这个是网页啊,要是遇到聊天室,还会用F5?

  15. 妹子最多的大学排行

    无刷新的聊天室在哪,能共享不。。夏日。

给我留言