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 字符串乘法
Aug 20 Javascript
JavaScript面向对象(极简主义法minimalist approach)
Jul 17 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
javascript实现连续赋值
Aug 10 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
JavaScript中附件预览功能实现详解(推荐)
Aug 15 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
百度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
调频问题解答
2021/03/01 无线电
php Smarty初体验二 获取配置信息
2011/08/08 PHP
深入apache host的配置详解
2013/06/09 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
用JavaScript隐藏控件的方法
2009/09/21 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
javascript实现用户点击数量统计
2016/12/25 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
js布局实现单选按钮控件
2020/01/17 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python实现数据写入excel表格
2018/03/25 Python
pandas object格式转float64格式的方法
2018/04/10 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
学习Django知识点分享
2019/09/11 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
python实现交并比IOU教程
2020/04/16 Python
python 制作网站小说下载器
2021/02/20 Python
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
就业自我评价
2014/02/04 职场文书
护士岗位职责
2014/02/16 职场文书
党的生日演讲稿
2014/09/10 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python