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 相关文章推荐
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
JS前端监控采集用户行为的N种姿势
Jul 23 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
Bootstrap布局之栅格系统学习笔记
2017/05/04 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
2017/11/14 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
python matplotlib坐标轴设置的方法
2017/12/05 Python
Django 视图层(view)的使用
2018/11/09 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
医学类导师推荐信范文
2013/11/19 职场文书
保洁主管岗位职责
2013/11/20 职场文书
员工工作表扬信范文
2014/01/13 职场文书
迎国庆演讲稿
2014/09/15 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
督导岗位职责
2015/02/04 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript