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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
详解javascript数组去重问题
Nov 06 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
Vue拖拽组件开发实例详解
May 11 Javascript
详解vue.js移动端配置flexible.js及注意事项
Apr 10 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
laravel容器延迟加载以及auth扩展详解
2015/03/02 PHP
PHP7.0安装笔记整理
2015/08/28 PHP
laravel入门知识点整理
2020/09/15 PHP
javascript 对象的定义方法
2007/01/10 Javascript
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
jquery中动态效果小结
2010/12/16 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
vue全局使用axios的方法实例详解
2018/11/22 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
python使用正则表达式替换匹配成功的组
2017/11/17 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
Python爬取某平台短视频的方法
2021/02/08 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
css3隔行变换色实现示例
2014/02/19 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
保险公司早会主持词
2014/03/22 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
神龙架导游词
2015/02/11 职场文书
市场营销计划书
2019/04/24 职场文书