浅析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 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
javascript function调用时的参数检测常用办法
Feb 26 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
7个JS基础知识总结
Mar 05 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
js回文数的4种判断方法示例
Jun 04 Javascript
vue实现记事本功能
Jun 26 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 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 substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
javascript中JSON对象与JSON字符串相互转换实例
2015/07/11 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
Python TCPServer 多线程多客户端通信的实现
2019/12/31 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
写好自荐信的要点
2013/11/06 职场文书
公积金单位接收函
2014/01/11 职场文书
《影子》教学反思
2014/02/21 职场文书
神农溪导游词
2015/02/11 职场文书
教师节寄语2015
2015/03/23 职场文书
个人借条范本
2015/05/25 职场文书
装修安全责任协议书
2016/03/22 职场文书
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript