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 png图片(有含有透明)在IE6中为什么不透明了
Feb 07 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
Oct 26 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
详解数组Array.sort()排序的方法
May 09 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 Javascript
React精髓!一篇全概括小结(急速)
May 23 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 Javascript
微信小程序利用云函数获取手机号码
Dec 17 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
jquery JSON的解析方式
2009/07/25 Javascript
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
jquery比较简洁的软键盘特效实现方法
2015/03/19 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
JS使用正则表达式提交页面验证的代码
2019/10/16 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python中协程用法代码详解
2018/02/10 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
Python基础知识点 初识Python.md
2019/05/14 Python
python的help函数如何使用
2020/06/11 Python
浅析python 通⽤爬⾍和聚焦爬⾍
2020/09/28 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
大二学生学习个人自我评价
2014/01/19 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
求职信范文大全
2014/05/26 职场文书
健康状况证明书
2014/11/26 职场文书