浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总


Posted in Javascript onJuly 08, 2013

先来看一个简单的例子:
下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。
frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
< TITLE > frame </ TITLE >
</ HEAD >
< frameset rows ="50%,50%" >
< frame name =top   src ="top.html" >
< frame name =bottom   src ="bottom.html" >
</ frameset >
</ HTML >

现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新,可以用以下七种语句,哪个好用自己看着办了。
语句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();
top.html 页面的代码如下:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
   < TITLE > top.html </ TITLE >
</ HEAD >
< BODY >
< input type =button value ="刷新1" onclick ="window.parent.frames[1].location.reload()" >< br >
< input type =button value ="刷新2" onclick ="window.parent.frames.bottom.location.reload()" >< br >
< input type =button value ="刷新3" onclick ="window.parent.frames['bottom'].location.reload()" >< br >
< input type =button value ="刷新4" onclick ="window.parent.frames.item(1).location.reload()" >< br >
< input type =button value ="刷新5" onclick ="window.parent.frames.item('bottom').location.reload()" >< br >
< input type =button value ="刷新6" onclick ="window.parent.bottom.location.reload()" >< br >
< input type =button value ="刷新7" onclick ="window.parent['bottom'].location.reload()" >< br >
</ BODY >
</ HTML >

下面是bottom.html页面源代码,为了证明下方页面的确被刷新了,在装载完页面弹出一个对话框。
bottom.html 页面的代码如下:
 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
< HEAD >
   < TITLE > bottom.html </ TITLE >
</ HEAD >
< BODY onload ="alert('我被加载了!')" >
< h1 > This is the content in bottom.html. </ h1 >
</ BODY >
</ 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.页面自动刷新:把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20">
其中20指每隔20秒刷新一次页面.
2.页面自动跳转:把如下代码加入<head>区域中
<meta http-equiv="refresh" content="20;url=https://3water.com">
其中20指隔20秒后跳转到https://3water.com页面
3.页面自动刷新js版
<script language="JavaScript">
function myrefresh()
{
       window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>
ASP.NET如何输出刷新父窗口脚本语句
1.this.response.write("<script>opener.location.reload();</script>"); 
2.this.response.write("<script>opener.window.location.href = opener.window.location.href;</script>");  
3.Response.Write("<script language=javascript>opener.window.navigate(''你要刷新的页.asp'');</script>")
JS刷新框架的脚本语句
//如何刷新包含该框架的页面用  
<script language=JavaScript>
   parent.location.reload();
</script>  
//子窗口刷新父窗口
<script language=JavaScript>
    self.opener.location.reload();
</script>
( 或 <a href="javascript:opener.location.reload()">刷新</a>    )
//如何刷新另一个框架的页面用  
<script language=JavaScript>
   parent.另一FrameID.location.reload();
</script>
如果想关闭窗口时刷新或者想开窗时刷新的话,在<body>中调用以下语句即可。
<body onload="opener.location.reload()"> 开窗时刷新
<body onUnload="opener.location.reload()"> 关闭时刷新
<script language="javascript">
window.opener.document.location.reload()
</script>
在弹出窗口的BODY中加入 onUnload="window.opener.location.reload();" 关闭弹出窗口则自动刷新父窗口.
Javascript 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
javascript div 遮罩层封锁整个页面
Jul 10 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
Mar 09 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
老生常谈js中0到底是 true 还是 false
Mar 08 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
动态规划之使用备忘录来改进Javascript函数
Apr 07 Javascript
vue实现Toast组件轻提示
Apr 10 Vue.js
解析javascript 浏览器关闭事件
Jul 08 #Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
Jul 08 #Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 #Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 #Javascript
JS定义回车事件(实现代码)
Jul 08 #Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 #Javascript
使用js 设置url参数
Jul 08 #Javascript
You might like
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
easyui简介_动力节点Java学院整理
2017/07/14 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
解析Python中while true的使用
2015/10/13 Python
python动态网页批量爬取
2016/02/14 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python实现反转部分单向链表
2018/09/27 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
Pytorch 高效使用GPU的操作
2020/06/27 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
用缩写的指针比较"if(p)" 检查空指针是否可靠?如果空指针的内部表达不是0会怎么样?
2014/01/05 面试题
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
体育教学随笔感言
2014/02/24 职场文书
答谢词范文
2015/01/05 职场文书
顶岗实习协议书
2015/01/29 职场文书
安全责任协议书范本
2016/03/23 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python