window.parent与window.opener的区别与使用

最新推荐文章于 2024-01-25 11:34:03 发布

转载最新推荐文章于 2024-01-25 11:34:03 发布 · 502 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/opaljc/archive/2012/09/17/2688950.html

本文详细解析了在网页开发中，如何使用window.parent与window.opener进行iframe与父页面、子窗口与父窗口之间的跨窗体通信。通过具体示例展示了如何在iframe中操作父页面的表单元素，以及在子窗口中对打开它的父窗口元素进行赋值。

1、window.parent 是iframe页面调用父页面对象

举例: a.html

<html>
<head><title>A</title></head>
<body>
<form name="form1" id="form1">
<input type="text" name="username" id="username"/>
</form>
<iframe src="b.html" width=100%></iframe>
</body>
</html>

如果我们需要在b.html中要对a.html中的username文本框赋值（就如很多上传功能，上传功能页在ifrmae中，上传成功后把上传后的路径放入父页面的文本框中），我们应该在b.html中写：

<script type="text/javascript">
var _parentWin = window.parent;
_parentWin.form1.username.value = "xxxx";
</script>

Z-Blog的文章编辑页面上传功能就是这么实现的。

2、window.opener 是 window.open 打开的子页面调用父页面对象

opener：对打开当前窗口的window对象的引用，如果当前窗口被用户打开，则它的值为null。

self代表自身窗口，opener代表打开自身的那个窗口，比如窗口a.html打开窗口b.html。如果靠window.open方法，则对于窗口b.html，self代表b.html自己，而opener代表窗口a.html。

举例：a.html

<input type="text" name="username" id="username"/>
<a onclick="window.open(this.href,'','resizable=yes,width=800,height=600,status'); return false" href="b.html">B</a>

如果需要在b.html中对a.html中的表单元素赋值，我们应该在b.html中这么写

<a href="javascript:try{window.opener.document.getElementById('username').contentWindow.
frames[0].document.getElementsByTagName('body')[0].innerHTML+='xxx'}catch(e){};window.close();">插入</a>

在后面用window.close关闭b.html。WindsPhoto 2.7.3 中在文章编辑页面弹出新窗口（图片列表）后，选择插入已上传图片便是如此实现的。

转载于:https://www.cnblogs.com/opaljc/archive/2012/09/17/2688950.html

标签