浅析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 Cookie的读取和写入函数
Dec 08 Javascript
分享27款非常棒的jQuery 表单插件
Mar 28 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
Jan 20 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
详解vue-cli3多页应用改造
Jun 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学习笔记之 函数声明(二)
2011/06/09 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
基于php实现七牛抓取远程图片
2015/12/01 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
13个PHP函数超实用
2015/10/21 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
2016/06/22 Javascript
从0开始学Vue
2016/10/27 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
小程序转发探索示例
2019/02/19 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
python使用mysql数据库示例代码
2017/05/21 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
python圣诞树编写实例详解
2020/02/13 Python
Python类super()及私有属性原理解析
2020/06/15 Python
python右对齐的实例方法
2020/07/05 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
市级三好学生评语
2014/12/29 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js