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中匿名函数,函数直接量和闭包
May 08 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
深入学习JavaScript对象
Oct 13 Javascript
BootStrap响应式导航条实例介绍
May 06 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
Vue组件通信之Bus的具体使用
Dec 28 Javascript
Vue动画事件详解及过渡动画实例
Feb 09 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
python正则表达式match和search用法实例
2015/03/26 Python
python僵尸进程产生的原因
2017/07/21 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
2014/11/11 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
党员干部承诺书
2014/03/25 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
遗嘱范文
2015/08/07 职场文书
终止合同协议书范本
2016/03/22 职场文书
Python 内置函数速查表一览
2021/06/02 Python