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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
微信小程序canvas截取任意形状的实现代码
Jan 13 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 set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
PHP中的reflection反射机制测试例子
2014/08/05 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
2019/06/17 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
应届毕业生求职信范文
2013/12/18 职场文书
职工运动会邀请函
2014/01/19 职场文书
实习生求职自荐信
2014/02/07 职场文书
免职证明样本
2014/10/23 职场文书
自查自纠整改报告
2014/11/06 职场文书
雷锋观后感
2015/06/10 职场文书
母亲节感言
2015/08/03 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书