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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
javascript中的delete使用详解
Apr 11 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
thinkphp 表名 大小写 窍门
Feb 01 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
js实现常用排序算法
Aug 09 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
实例讲解php数据访问
2016/05/09 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
jQuery图片轮播的具体实现
2013/09/11 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python openpyxl使用方法详解
2019/07/18 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
远东集团网络工程师面试题
2014/10/20 面试题
C#的几个面试问题
2016/05/22 面试题
自我鉴定范文300字
2013/10/01 职场文书
护理学中专毕业生求职信
2013/11/11 职场文书
社区服务活动小结
2014/07/08 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
投诉信范文
2015/07/02 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android