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 相关文章推荐
游戏人文件夹程序 ver 3.0
Jul 14 Javascript
JavaScript使用prototype定义对象类型
Feb 07 Javascript
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
百度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
2006/11/25 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
php字符串函数学习之substr()
2015/03/27 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
SVM基本概念及Python实现代码
2017/12/27 Python
python 不以科学计数法输出的方法
2018/07/16 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
python 弹窗提示警告框MessageBox的实例
2019/06/18 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
学校采购员岗位职责
2014/01/02 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
农村党员干部承诺书
2015/05/04 职场文书
表扬信格式模板
2015/05/05 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
vue.js Router中嵌套路由的实用示例
2021/06/27 Vue.js
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android