Js 刷新框架页的代码


Posted in Javascript onApril 13, 2010

先来看一个简单的例子:
下面以三个页面分别命名为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=HTTP://www。wyxg。com">
其中20指隔20秒后跳转到HTTP://www。wyxg。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>

//如果都不行试以下
Response.Write("<script language=javascript>window.opener.location.reload();window.close();</script>");
下面是几个可以参考的文章:
js刷新框架子页面的七种方法代码

JS与框架页的操作代码

Javascript 相关文章推荐
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
js实现网页随机切换背景图片的方法
Nov 01 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 Javascript
Javascript设计模式之原型模式详细
Oct 05 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 #Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 #Javascript
JavaScript 数组运用实现代码
Apr 13 #Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 #Javascript
Javascript 判断Flash是否加载完成的代码
Apr 12 #Javascript
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 #Javascript
javascript URL编码和解码使用说明
Apr 12 #Javascript
You might like
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
JavaScript图片放大技术(放大镜)实现代码分享
2013/11/14 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
Angular4.0动画操作实例详解
2019/05/10 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
d3.js实现图形缩放平移
2019/12/19 Javascript
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
酒店保安领班职务说明书
2014/03/04 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
有创意的广告词
2014/03/18 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
影子教师研修方案
2014/06/14 职场文书
项目投资合作意向书
2014/07/29 职场文书
幼儿教师年度个人总结
2015/02/05 职场文书
情感电台广播稿
2015/08/18 职场文书
2016个人廉洁自律承诺书
2016/03/25 职场文书
公司周年庆寄语
2019/06/21 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB