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数组定义方法
Sep 10 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
js图片延迟加载的实现方法及思路
Jul 22 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
Vue.js实战之Vuex的入门教程
Apr 01 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
详解如何使用Node.js实现热重载页面
May 06 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 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 常用字符串函数总结
2008/03/15 PHP
php导入模块文件分享
2015/03/17 PHP
js function使用心得
2010/05/10 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
jquery控制表单输入框显示默认值的方法
2015/05/22 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
jquery.validate使用详解
2016/06/02 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
vuex 的简单使用
2018/03/22 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Django框架实现的分页demo示例
2019/05/25 Python
24式加速你的Python(小结)
2019/06/13 Python
python tkinter GUI绘制,以及点击更新显示图片代码
2020/03/14 Python
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
七年级音乐教学反思
2014/01/26 职场文书
高中地理教学反思
2014/01/29 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
原材料检验岗位职责
2014/03/15 职场文书
六五普法规划实施方案
2014/03/21 职场文书
音乐幼师求职信
2014/07/09 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
拆迁委托协议书
2014/09/15 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
店铺转让协议书
2014/12/02 职场文书
大学毕业生自我评价
2015/03/02 职场文书