js中opener与parent的区别详细解析

js中opener与parent的区别详细解析

作者： 字体：[增加 减小] 类型：转载 时间：2014-01-14 我要评论

本篇文章主要是对js中opener与parent的区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助

id="iframeu2261530_0" src="http://pos.baidu.com/ecom?sz=680x200&rdid=2261530&dc=2&exps=112102&di=u2261530&dri=0&dis=0&dai=2&ps=418x27&coa=at%3D3%26rsi0%3D680%26rsi1%3D200%26pat%3D6%26tn%3DbaiduCustNativeAD%26rss1%3D%2523FFFFFF%26conBW%3D1%26adp%3D1%26ptt%3D0%26titFF%3D%2525E5%2525BE%2525AE%2525E8%2525BD%2525AF%2525E9%25259B%252585%2525E9%2525BB%252591%26titFS%3D14%26rss2%3D%2523000000%26titSU%3D0%26ptbg%3D90%26piw%3D0%26pih%3D0%26ptp%3D0&dcb=BAIDU_SSP_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1458263681339&ti=js%E4%B8%ADopener%E4%B8%8Eparent%E7%9A%84%E5%8C%BA%E5%88%AB%E8%AF%A6%E7%BB%86%E8%A7%A3%E6%9E%90_javascript%E6%8A%80%E5%B7%A7_%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6&ari=1&dbv=2&drs=1&pcs=1045x619&pss=1045x424&cfv=0&cpl=4&chi=1&cce=true&cec=GBK&tlm=1457109989&ltu=http%3A%2F%2Fwww.jb51.net%2Farticle%2F45626.htm&ltr=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DxoYkPKUV3hYUIRcNAkAvRSZAQUzfzA-EFT-D1m27SShdB5P6PlXanN6MOIWYLz6q%26wd%3D%26eqid%3Da0fe393a000f8ea10000000556eb5641&ecd=1&psr=1366x768&par=1366x728&pis=-1x-1&ccd=24&cja=false&cmi=6&col=zh-CN&cdo=-1&tcn=1458263681&qn=dae6738bb75f179e&tt=1458263681314.99.385.386" width="680" height="200" align="center,center" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true" style="display: block; border-width: 0px; border-style: initial; vertical-align: bottom; margin: 0px;">

opener即谁打开我的，比如A页面利用window.open弹出了B页面窗口，那么A页面所在窗口就是B页面的opener，在B页面通过opener对象可以访问A页面。

parent表示父窗口，比如一个A页面利用iframe或frame调用B页面，那么A页面所在窗口就是B页面的parent。在JS中，window.opener只是对弹出窗口的母窗口的一个引用。比如：a.html中，通过点击按钮等方式window.open出一个新的窗口b.html。那么在b.html中，就可以通过window.opener（省略写为opener）来引用a.html，包括a.html的document等对象，操作a.html的内容。

假如这个引用失败，那么将返回null。所以在调用opener的对象前，要先判断对象是否为null，否则会出现“对象为空或者不存在”的JS错误。

示例：
aa.html

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<span id="name"></span>
<input type="button" " value="弹窗" onclick="window.open('bb.html')" />
</body>
</html

bb.html

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 </head>
 <body>
 <input type="text"  id="inputValue"/>
 <input type="button"  value="添加" onclick="window.opener.document.getElementById('name').innerHTML=inputValue.value"/>
 </body>
 </html> 

window.opener 返回的是创建当前窗口的那个窗口的引用，比如点击了aa.htm上的一个链接而打开了bb.htm，然后我们打算在bb.htm上输入一个值然后赋予aa.htm上的一个id为“name”的textbox中，就可以

写为：
window.opener.document.getElementById("name").value = "输入的数据";
window.opener.document.getElementById("name").innerHTML= "输入的数据";