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 相关文章推荐
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
js预加载图片方法汇总
Jun 15 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
layui的select联动实现代码
Sep 28 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简单实现批量上传图片的方法
2016/05/09 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
学习Vue组件实例
2018/04/28 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
[01:47]2018年度DOTA2最具人气解说-完美盛典
2018/12/16 DOTA
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
python+pygame实现坦克大战
2019/09/10 Python
Python 读取位于包中的数据文件
2020/08/07 Python
python使用ctypes库调用DLL动态链接库
2020/10/22 Python
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
仓库理货员岗位职责
2013/12/18 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
员工辞职信范文大全
2015/05/12 职场文书
刑事案件上诉状
2015/05/23 职场文书
超强台风观后感
2015/06/09 职场文书
高一化学教学反思
2016/02/22 职场文书
关于JavaScript轮播图的实现
2021/11/20 Javascript