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弹簧振子超简洁版 完全符合能量守恒,胡克定理
Oct 25 Javascript
javascript new一个对象的实质
Jan 07 Javascript
javascript白色简洁计算器
May 04 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
JavaScript逻辑运算符相关总结
Sep 04 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
Python实现股市信息下载的方法
2015/06/15 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python中查看文件名和文件路径
2017/03/31 Python
详解Python3.6安装psutil模块和功能简介
2018/05/30 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
护士医德医风自我评价
2014/09/15 职场文书
2014年大学团支部工作总结
2014/12/02 职场文书
五年级下册复习计划
2015/01/19 职场文书
罚站检讨书
2015/01/29 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
美德少年事迹材料(2016推荐版)
2016/02/25 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Nginx四层负载均衡的配置指南
2021/06/11 Servers