浅析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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
浅谈setTimeout 与 setInterval
Jun 23 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
JS之相等操作符详解
Sep 13 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
深入理解 Koa 框架中间件原理
Oct 18 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 Javascript
解析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中的时间处理
2006/10/09 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
js实现楼层导航功能
2017/02/23 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
mpvue将vue项目转换为小程序
2018/09/30 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
详解Vue中的自定义指令
2020/12/07 Vue.js
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python执行使用shell命令方法分享
2017/11/08 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
python+opencv识别图片中的圆形
2020/03/25 Python
python单例模式的多种实现方法
2019/07/26 Python
入团者的自我评价分享
2013/12/02 职场文书
经典优秀个人求职信分享
2013/12/12 职场文书
高级工程师英文求职信
2014/03/19 职场文书
2015年教师节慰问信
2015/03/23 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
python本地文件服务器实例教程
2021/05/02 Python
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS