编程 Javascript

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>

js刷新框架子页面的七种方法代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

cnblogs TagCloud基于jquery的实现代码

Jun 11 Javascript

JQuery实现点击div以外的位置隐藏该div窗口

Sep 13 Javascript

AngularJS iframe跨域打开内容时报错误的解决办法

Jan 26 Javascript

jQuery动画与特效详解

Feb 01 Javascript

JS实现仿新浪微博发布内容为空时提示功能代码

Aug 19 Javascript

图片旋转、鼠标滚轮缩放、镜像、切换图片js代码

Dec 13 Javascript

JavaScript:Date类型全面解析

May 19 Javascript

vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析

Mar 11 Javascript

微信小程序获取用户信息并保存登录状态详解

May 10 Javascript

layui实现tab的添加拒绝重复的方法

Sep 04 Javascript

原生JS实现烟花效果

Mar 10 Javascript

vue实现图书管理系统

Dec 29 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