浅析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入门教程 Cookies
Jan 31 Javascript
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
javascript学习基础笔记之DOM对象操作
Nov 03 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
jQuery+Ajax实现无刷新分页
Oct 30 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
May 09 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
DOM 事件流详解
2015/01/20 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
目前最全的python的就业方向
2018/06/05 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
python线程的几种创建方式详解
2019/08/29 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
谷歌浏览器小字体处理方案即12px以下字体
2013/12/17 HTML / CSS
浅谈html5之sse服务器发送事件EventSource介绍
2017/08/28 HTML / CSS
2014年迎新年活动方案
2014/02/19 职场文书
旅游安全协议书
2014/04/21 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
六年级情感作文之500字
2019/10/23 职场文书
导游词之镜泊湖
2019/12/09 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
如何解决php-fpm启动不了问题
2021/11/17 PHP
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL