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 相关文章推荐
事件模型在各浏览器中存在差异
Oct 20 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
Mar 07 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
vue 取出v-for循环中的index值实例
Nov 09 Javascript
拖拉表格的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上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP速成大法
2015/01/30 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
js流动式效果显示当前系统时间
2016/05/16 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
js 获取json数组里面数组的长度实例
2017/10/31 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
jquery将json转为数据字典的实例代码
2019/10/11 jQuery
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
Python中int()函数的用法浅析
2017/10/17 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
tensorflow多维张量计算实例
2020/02/11 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
极简的HTML5模版
2015/07/09 HTML / CSS
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
企业公益活动策划方案
2014/08/24 职场文书
教师工作失职检讨书
2014/09/18 职场文书
遗愿清单观后感
2015/06/09 职场文书
高三教师工作总结2015
2015/07/21 职场文书
Python中基础数据类型 set集合知识点总结
2021/08/02 Python
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
SQL Server实现分页方法介绍
2022/03/16 SQL Server
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers