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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
Google韩国首页图标动画效果
Aug 26 Javascript
jQuery+CSS 实现的超Sexy下拉菜单
Jan 17 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
js获取视频时长代码
Apr 10 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
Vue数据绑定简析小结
May 07 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
vue3.0中setup使用(两种用法)
Dec 02 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框架Symfony2经典入门教程
2014/07/08 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
Textarea与懒惰渲染实现代码
2012/01/04 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
JavaScript中的标签语句用法分析
2015/02/10 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
JavaScript canvas绘制折线图
2020/02/18 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python匹配中文的正则表达式
2016/05/11 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
利用python画出AUC曲线的实例
2020/02/28 Python
应用化学专业本科生求职信
2013/09/29 职场文书
模具数控专业自荐信
2014/01/27 职场文书
课外小组活动总结
2014/08/27 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
应聘教师自荐信
2015/03/26 职场文书
python办公自动化之excel的操作
2021/05/23 Python
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS