浅析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 相关文章推荐
jquery实现带二级菜单的导航示例
Apr 28 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
javascript字符串函数汇总
Dec 06 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
Feb 22 Javascript
js实现查询商品案例
Jul 22 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错误提示的关闭方法详解
2013/06/23 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
关于Python 3中print函数的换行详解
2017/08/08 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Python实现序列化及csv文件读取
2020/01/19 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
伊莱克斯阿根廷网上商店:Tienda Electrolux
2021/03/08 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
销售简历自我评价
2014/01/24 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
大学生个人学习总结
2015/02/15 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
MySQL实例精讲单行函数以及字符数学日期流程控制
2021/10/15 MySQL
利用Python实现模拟登录知乎
2022/05/25 Python