window.parent与window.openner区别介绍


Posted in Javascript onApril 12, 2012

今天总结一下js中几个对象的区别和用法:
首先来说说 parent.window与top.window的用法
"window.location.href"、"location.href"是本页面跳转
"parent.location.href"是上一层页面跳转
"top.location.href"是最外层的页面跳转
举例说明:
如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js这样写
"window.location.href"、"location.href":D页面跳转
"parent.location.href":C页面跳转
"top.location.href":A页面跳转
现在终于明白了连接的时候target的用法了:
_blank:重新打开一个窗口
_parent:父窗口执行重定向
_self:自身页面重定向
_top:第一个父窗口重定向
综上所述可知:parent.window:父窗口对象 top.window:第一个父窗口的对象
下面来重点看看window.parent与window.openner区别
window.parent 是iframe页面调用父页面对象,当我们想从iframe内嵌的页面中访问外层页面是可以直接利用window.parent获取;
例子如下:
A.html

<html> 
<head> 
<title>父页面</title> 
</head> 
<body> 
<form id="form1" action=""> 
<div> 
输入值: 
<input type="text" name="username" id="username" /><br /> 
<iframe src="b.html" width="400px" height="300px"></iframe> 
</div> 
</form> 
</body> 
</html>

B.html
<html> 
<head> 
<script type="text/javascript"> 
function getpValue() 
{ 
document.getElementByIdx_x_x_x("span1").innerText=window.parent.document.getElementByIdx_x_x_x("username").value; 
} 
</script> 
</head> 
<body> 
<span>文本框值为:</span><span id="span1"></span><br /> 
<input type="button" value="获取父窗口内的文本框值" onclick="getpValue();"> 
</body> 
</html>

window.opener 是window.open或超链接<a> 打开的子页面调用父页面对象
例子如下
a.html
<html> 
<head> 
<title>父页面</title> 
<script type="text/javascript"> 
function openB() 
{ 
window.open('b.html','b','width=400,height=200,status=no,toolbar=no,menubar=no,location=no,resizable=yes,left=200,top=100'); 
} 
</script> 
</head> 
<body> 
<form id="form1" action=""> 
<div> 
输入值: 
<input type="text" name="username" id="username" /><br /> 
<input type="button" value="打开窗口B" onclick="openB();" /><br /> 
<a href="b.html" target="_blank">超链接打开B页面</a> 
</div> 
</form> 
</body> 
</html>

b.html
<html> 
<head> 
<script type="text/javascript"> 
function getpValue() 
{ 
document.getElementByIdx_x_x_x("span1").innerText=window.opener.document.getElementByIdx_x_x_x("username").value; 
} 
</script> 
</head> 
<body> 
<span>文本框值为:</span><span id="span1"></span><br /> 
<input type="button" value="获取父窗口内的文本框值" onclick="getpValue();"> 
</body> 
</html>

下面来举几个常用的例子:
parent.window与top.window一般在分割的页面即 frameset或iframe中使用
注销整个框架后返回到login.aspx:parent.window.location='Login.aspx'或者
top.window.location='Login.aspx'
window.parent也是常在框架中使用,
刷新:window.parent.location.reload();或者刷新某个框架:window.parent.MainForm.location.reload();
获得其他框架的元素值:window.parent.MainForm.form1.text1.value;
window.opener主要是获得通过超链接或者 window.open() 打开本身页面的页面的一些,比如获得值,刷新等
刷新:window.opener.location.reload();
获值:window.opener.document.getElement("txtName").value;
后退:top.playFrame.history.go(-1);
前进: top.playFrame.history.go(1);
刷新: top.playFrame.location.reload();
就总结到这里,这些对象很实用
Javascript 相关文章推荐
使用js+jquery实现无限极联动
May 23 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
JavaScript单元测试ABC
Apr 12 #Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 #Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 #Javascript
JQuery学习笔录 简单的JQuery
Apr 09 #Javascript
广泛收集的jQuery拖放插件集合
Apr 09 #Javascript
深入分析js中的constructor和prototype
Apr 07 #Javascript
浅谈javascript中的作用域
Apr 07 #Javascript
You might like
Terran历史背景
2020/03/14 星际争霸
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
Smarty变量用法详解
2016/05/11 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
利用Python开发微信支付的注意事项
2016/08/19 Python
python实现windows下文件备份脚本
2018/05/27 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
python生成任意频率正弦波方式
2020/02/25 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Lentiamo丹麦:购买便宜的隐形眼镜
2021/01/13 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
公司端午节活动方案
2014/02/04 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
静心口服夜广告词
2014/03/20 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
恰同学少年观后感
2015/06/08 职场文书