浅析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 异步调用框架 (Part 6 - 实例 &amp; 模式)
Aug 04 Javascript
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
javascript的BOM汇总
Jul 16 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
JsChart组件使用详解
Mar 04 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
JS实现随机点名器
Apr 12 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
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
laravel model 两表联查示例
2019/10/24 PHP
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
Javascript事件实例详解
2013/11/06 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
python实现封装得到virustotal扫描结果
2014/10/05 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
python实现给微信公众号发送消息的方法
2017/06/30 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
浅谈Tensorflow模型的保存与恢复加载
2018/04/26 Python
Python实现的质因式分解算法示例
2018/05/03 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
Python中itertools的用法详解
2020/02/07 Python
Python识别html主要文本框过程解析
2020/02/18 Python
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
J2EE中的容器都包括哪些
2013/08/21 面试题
医学毕业生自我鉴定
2013/10/30 职场文书
学生打架检讨书
2014/02/14 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
端午节活动总结
2014/08/26 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA