js刷新框架子页面的七种方法代码


Posted in Javascript onNovember 20, 2008

面以三个页面分别命名为framedemo.html,top.html,button.html为例来具体说明如何做。
其中framedemo.html由上下两个页面组成,代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> frameDemo </TITLE> 
</HEAD> 
<frameset rows="50%,50%"> 
<frame name=top src="top.html"> 
<frame name=button src="button.html"> 
</frameset> 
</HTML>

现在假设top.html即上面的页面有一个button来实现对下面页面的刷新,可以用以下七种语句,哪个好用自己看着办了。
语句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();
解释一下:
1.window指代的是当前页面,例如对于此例它指的是top.html页面。
2.parent指的是当前页面的父页面,也就是包含它的框架页面。例如对于此例它指的是framedemo.html。
3.frames是window对象,是一个数组。代表着该框架内所有子页面。
4.item是方法。返回数组里面的元素。
5.如果子页面也是个框架页面,里面还是其它的子页面,那么上面的有些方法可能不行。
top.html源代码;(页面上有七个按钮,功能都是刷新下面的框架页面)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
</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页面源代码,为了证明下方页面的确被刷新了,在装载完页面弹出一个对话框。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
</HEAD> 
<BODY onload="alert('我被加载了!')"> 
<h1>This is the content in button.html.</h1> 
</BODY> 
</HTML>
Javascript 相关文章推荐
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
用console.table()调试javascript
Sep 04 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
Jun 22 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
拖拉表格的JS函数
Nov 20 #Javascript
设置下载不需要倒计时cookie(倒计时代码)
Nov 19 #Javascript
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 #Javascript
$.ajax json数据传递方法
Nov 19 #Javascript
jquery $.ajax入门应用二
Nov 19 #Javascript
jquery $.ajax入门应用一
Nov 19 #Javascript
传递参数的标准方法(jQuery.ajax)
Nov 19 #Javascript
You might like
谈谈PHP的输入输出流
2007/02/14 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
alert中断settimeout计时功能
2013/07/26 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
python 字符串split的用法分享
2013/03/23 Python
Python通过命令开启http.server服务器的方法
2017/11/04 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
Python的UTC时间转换讲解
2019/02/26 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
python3 反射的四种基本方法解析
2019/08/26 Python
解决django FileFIELD的编码问题
2020/03/30 Python
python实现四人制扑克牌游戏
2020/04/22 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
项目经理岗位职责
2015/01/31 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python