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 相关文章推荐
Javascript与flash交互通信基础教程
Aug 07 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
jqTransform form表单美化插件使用方法
Jul 05 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
详解AngularJS ng-class样式切换
Jun 27 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
vue与iframe之间的信息交互的实现
Apr 08 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统计nginx访问日志中的搜索引擎抓取404链接页面路径
2014/06/30 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
对JavaScript的eval()中使用函数的进一步讨论
2008/07/26 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
分享一个自己写的简单的javascript分页组件
2015/02/15 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
js中toString()和String()区别详解
2017/03/23 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
大学生的应聘自我评价
2013/12/13 职场文书
行政专员工作职责
2013/12/22 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
推荐信模板
2014/05/09 职场文书
中央空调节能方案
2014/06/15 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
工程款申请报告
2015/05/15 职场文书
龙猫观后感
2015/06/09 职场文书
详解python的内存分配机制
2021/05/10 Python
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript