浅析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 相关文章推荐
Javascript里使用Dom操作Xml
Sep 20 Javascript
js jquery做的图片连续滚动代码
Jan 06 Javascript
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
JS多物体 任意值 链式 缓冲运动
Aug 10 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
js核心基础之闭包的应用实例分析
May 11 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中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
html下载本地
2006/06/19 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
iview form清除校验状态的实现
2019/09/19 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
JS中的模糊查询功能
2019/12/08 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
Bibloo罗马尼亚网站:女装、男装、童装及鞋子和配饰
2019/07/20 全球购物
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
怎么写自荐书范文
2014/02/12 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
诚信承诺书范文
2014/03/27 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
2016党员入党决心书
2015/09/22 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android