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语言本身谈项目实战
Dec 27 Javascript
面向对象的编程思想在javascript中的运用上部
Nov 20 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
JQuery球队选择实例
May 18 Javascript
Javascript显示和隐藏ul列表的方法
Jul 15 Javascript
jquery插件EasyUI中form表单提交实例分享
Jan 11 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
Vue中使用sass实现换肤功能
Sep 07 Javascript
原生JS实现动态添加新元素、删除元素方法
May 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
用Flash图形化数据(二)
2006/10/09 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
获取body标签的两种方法
2011/10/13 Javascript
JS关键字球状旋转效果的实例代码
2013/11/29 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
JavaScript ES6 Class类实现原理详解
2020/05/08 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
Python深入学习之闭包
2014/08/31 Python
python 列表降维的实例讲解
2018/06/28 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
Python如何获取文件路径/目录
2020/09/22 Python
Python常用外部指令执行代码实例
2020/11/05 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
中医药大学毕业生自荐信
2013/11/08 职场文书
教师创先争优承诺书
2015/04/27 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
庭外和解协议书
2016/03/23 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书