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 的 prototype问题。
Jan 03 Javascript
jQuery1.6 使用方法一
Nov 23 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 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 表单验证实现代码
2009/03/10 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
php简单实现快速排序的方法
2015/04/04 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
2018/09/18 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
Python中random模块生成随机数详解
2016/03/10 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
Python 字符串池化的前提
2020/07/03 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
解释一下Windows的消息机制
2014/01/30 面试题
广告学专业毕业生自荐信
2013/09/24 职场文书
小学一年级学生评语
2014/04/22 职场文书
情况说明书格式范文
2014/05/06 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
装修公司管理制度
2015/08/05 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
详解OpenCV曝光融合
2022/04/29 Python