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 相关文章推荐
arguments对象
Nov 20 Javascript
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
小程序自定义日历效果
Dec 29 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
Sep 22 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
angular+webpack2实战例子
2017/05/23 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
浅谈React + Webpack 构建打包优化
2018/01/23 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python的面向对象思想分析
2015/01/14 Python
Python部署web开发程序的几种方法
2017/05/05 Python
利用Python破解斗地主残局详解
2017/06/30 Python
Python实现常见的回文字符串算法
2018/11/14 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
python关闭占用端口方式
2019/12/17 Python
Python基于数列实现购物车程序过程详解
2020/06/09 Python
python 基于wx实现音乐播放
2020/11/24 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
自我评价的范文
2014/02/02 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
Redis读写分离搭建的完整步骤
2021/09/14 Redis
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript
Python find()、rfind()方法及作用
2022/12/24 Python