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 相关文章推荐
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
Oct 26 Javascript
javascript设计模式之单体模式学习笔记
Feb 15 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
JS完成画圆圈的小球
Mar 07 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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中的超全局变量
2006/10/09 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
PHP 实现 JSON 数据的编码和解码操作详解
2020/04/22 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
django 外键model的互相读取方法
2018/12/15 Python
Python imread、newaxis用法详解
2019/11/04 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
协议书格式
2014/04/23 职场文书
师德模范事迹材料
2014/06/03 职场文书
《法国号》教学反思
2016/02/22 职场文书