浅析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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
初识javascript 文档碎片
Jul 13 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
JavaScript中string对象
Jun 12 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
在vue中import()语法不能传入变量的问题及解决
Apr 01 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 如何利用phpexcel导入数据库
2013/08/24 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
Node学习记录之cluster模块
2017/05/31 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
2020/04/20 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
讲解python参数和作用域的使用
2013/11/01 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
Python中sort和sorted函数代码解析
2018/01/25 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
详解python中eval函数的作用
2019/10/22 Python
TensorFlow基本的常量、变量和运算操作详解
2020/02/03 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
学生安全教育材料
2014/02/14 职场文书
会计学习心得体会
2014/09/09 职场文书
python开发飞机大战游戏
2021/07/15 Python