`

js刷新页面方法大全(收藏)

 
阅读更多

收藏一些js刷新当前页面的方法，这个在编程中经常用得到，正在找js刷新页面代码的朋友收藏下啦。
一、js刷新当前页面的例子： 
以三个页面分别命名为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，如果子页面也是个框架页面，里面还是其它的子页面，那么上面的有些方法可能不行。 

参考链接：js自动刷新当前页面方法详解，javascript刷新当前页面方法汇总，js刷新当前页面的几种方法
附： 
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，页面自动刷新：把如下代码加入<head>区域中 
<meta http-equiv="refresh" content="20"> 
其中20指每隔20秒刷新一次页面. 
2，页面自动跳转：把如下代码加入<head>区域中 
<meta http-equiv="refresh" content="20;url=http://www.jbxue.com"> 
其中20指隔20秒后跳转到http://www.jbxue.com页面 
3，页面自动刷新js版 

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

三、js刷新框架的脚本语句 
1，如何刷新包含该框架的页面用 

  1. <script language=javascript> 
  2. parent.location.reload(); 
  3. </script>

2，子窗口刷新父窗口 

  1. <script language=javascript> 
  2. self.opener.location.reload(); 
  3. </script>

3，刷新另一个框架的页面用
语句1. window.parent.frames[1].location.reload(); 
语句2. window.parent.frames.bottom.location.reload(); 
语句3. window.parent.frames["bottom"].location.reload(); 
语句4. window.parent.frames.item(1).location.reload(); 
语句5. window.parent.frames.item('bottom').location.reload(); 
语句6. window.parent.bottom.location.reload(); 
语句7. window.parent['bottom'].location.reload(); 

4，关闭窗口时刷新或开窗时刷新，在<body>中调用： 

  1. <body onload="opener.location.reload()"> 
  2. 开窗时刷新 
  3. <body onunload="opener.location.reload()"> 
  4. 关闭时刷新 
  5. <script language="javascript"> 
  6. window.opener.document.location.reload() 
  7. </script>

总结，js实现页面的刷新、包括当前页面的刷新与父子窗口的刷新，归到根上，都在使用location.reload与replace等方法。
万变不离其综，建议大家好好研究下js中的window对象、重点是location的用法，这对于如何实现js刷新页面会很有帮助的。

记录于 2014-3-22 放风筝归来-----------------------------

分享到：
| 汉字转化为拼音(php版)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript网页特效范例宝典源码

    实例110 使用toLocaleString()方法获取本地时间 176 实例111 全中文显示日期 176 实例112 在状态栏中显示日期时间 178 实例113 使用数组显示星期 179 实例114 在表格中显示时间 180 实例115 退出页面时显示停留时间 ...

    js效果页面实例及说明文档包html版

    绝对的经典javascript收藏 包含了各个种类的js校验实例 web开发绝妙帮手 &lt;br&gt;javascript收藏 1.页面校验 1.文本框约束输入 2.表单校验工具库 3.文本框部分内容不让改变 2.下拉框类 ...

    JS关于刷新页面的相关总结

    在本篇内容中我们给大家整理了关于JS刷新页面的所有相关知识点以及整理了相关的技术文章，大家可以收藏本页面继续深入学习。

    javascript大全---个人认为是很全了

    网站广告Js大全.rar 文字和鼠标一起动.htm 文字上下移动.htm 下拉菜单.js 下拉菜单效果.htm 显示日期.htm 显示页面中的链接.htm 旋转的文字.htm 页面关闭时自动跳出收藏夹.htm 页面滚动效果.htm 页面装载效果.htm ...

    程序天下:JavaScript实例自学手册

    1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 ...

    JS效果打包下载-自己整理的一些网站常用JS效果2

    29.收藏本站源码.html 30.鼠标换过链接出现对话框的效果.html 31.双击鼠标滚动屏幕的代码.html 32.随滚动条滚动代码.html 33.随即显示名人名言.html 34.腾讯图文轮换网页特效.html 35.腾讯新闻中心栏目焦点滚动效果....

    《程序天下：JavaScript实例自学手册》光盘源码

    1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 ...

    55种网页小技巧 ---- 下载无需扣分，具有一定收藏价值

    下载无需扣分，具有一定收藏价值，特此奉献！ 目录如下。 javascript主页弹出窗口技巧.html div span layer的区别.html email地址的分割.html ENTER键可以让光标移到下一个输入框.html IE地址栏前换成自己的...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    javascript函数的解释

    49.引用一个文件式的JS:&lt;script type="text/javascript" src="aaa.js"&gt; 50.指定在不支持脚本的浏览器显示的HTML:&lt;noscript&gt;&lt;/noscript&gt; 51.当超链和ONCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例...

    js单页式全屏（去掉了浏览器操作栏）

    这是单页式全屏，类似考试系统弹窗出来的一样，没有浏览器的收藏、撤销、刷新、前进等操作，只能进行关闭和页面操作。 需要进入页面就执行的小伙伴把代码改为自执行即可，目前为了展示三个方法是点击触发的。

    Fallen-London-Contacts-Favours:在页面顶部显示收藏夹； 您将需要通过单击响铃图标来手动刷新

    Fallen-London-联系方式-收藏夹在页面顶部显示收藏夹； 您将需要通过单击响铃图标来手动刷新。 在“帮助”和您的帐户名之间的顶部栏中显示了所有派系的图标。 要重新加载它们，请单击最右边的图标（响铃）。 该脚本...

    百度收藏夹(ASP仿腾讯微博) v2.9.rar

    31、完美解决发表新广播时不刷新页面，并且say.asp不预先加载，加快浏览速度。 32、修改删除广播时，直接在本页面内操作，而不是弹出新页面操作。 33、修改即时对话信息为无刷新HTML JS形式。 34、修改对话网址为...

    JavaScript实例精通

    示例描述：JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 ...

    《JavaScript实例精通》[源代码]

    示例描述：JavaScript结合文字实现特殊页面。 9_1.htm 逐隐逐现的文字特效。 9_2.htm 超酷的文字特效。 9_3.htm 阴影文字的特殊效果。 9_4.htm 彩色文字的特殊效果。 9_5.htm 升降文字的特殊效果。 ...

    ASP.NET开发实战1200例（第Ⅰ卷）第十二章

    实例319 利用JavaScript禁止复制网页内容 500 12.6 其他常用JavaScript 501 实例320 让你的网站更具人气——收藏本站 501 实例321 将你喜欢的网站设为主页 502 实例322 智能显示输入的剩余字符 503 实例323 在Web页...

    Ajax 四级导航菜单ASP+Access动态版

    网页上的收藏夹及分享功能代码 带当前时间显示的js日历 JavaScript适时监听输入框值的即时变化 自定义QQ在线状态图片 多种拖放元素功能的Js演示代码 - Ajax四级导航菜单ASP+Access动态版 所属分类：ASP源码 | Ajax...

    107个常用javascript语句

    89.window.location.reload()刷新当前页面. 90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的URL) 91.document.write()不换行的输出,...

    chrome-box:chrome拓展程序：鼠标手势，代码注入，生成网址二维码，网页收藏 等功能，这里停止更新，获取最新版本请到 gitee

    chrome-box )功能右键收藏链接到读点动态地在浏览器中注入js代码，支持jQuery.js添加鼠标手势的功能显示当前页面 url 的二维码百度知道助手（添加关注和我的关注，问题详情大图方向键切换)使用方法下载： git clone...

Magicbox
Global site tag (gtag.js) - Google Analytics