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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
学习vue.js计算属性
Dec 03 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 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中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
thinkPHP3.2使用RBAC实现权限管理的实现
2019/08/27 PHP
js操作iframe的一些方法介绍
2013/06/25 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
js实现简单页面全屏
2019/09/17 Javascript
使用vue打包进行云服务器上传的问题
2020/03/02 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python中random模块用法实例分析
2015/05/19 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python自定义线程类简单示例
2018/03/23 Python
python实现画一颗树和一片森林
2018/06/25 Python
Python判断telnet通不通的实例
2019/01/26 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
六道php面试题附答案
2014/06/05 面试题
应用艺术毕业生的自我评价
2013/12/04 职场文书
交通安全月活动总结
2015/05/08 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
2019思想汇报范文
2019/05/21 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python