JavaScript用window.opener实现父窗口和子窗口传值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript用window.opener实现父窗口和子窗口传值相关的知识，希望对你有一定的参考价值。
在实际项目中经常会有这样的需求，点击某个按钮弹出对话框，对话框中可以编辑和修改相应的内容，然后再保存并关闭窗口，如果写一个静态的div作为显示隐藏，倒也可以，但是还得调整样式，麻烦点。现在用window.open就可以实现同样的效果，父页面和子页面照样传值。
demo代码如下：
父页面：
html部分：
<!-- Author : 赵一鸣 Blog ： http://www.zymseo.com Time ： 2016/9/20 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父页面</title> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> .clear{ position:fixed; background:rgba(0,0,0,0.2); top:0px; right:0px; bottom:0px; left:0px; display:none; } </style> </head> <body> <input type="text" id="parentInpt" /> <input type="button" value="编辑" id="edit" /> <!--遮罩层--> <div class="clear"></div> </body> </html>
javascript部分：
<script type="text/javascript">
var parentPage = {
oEdit : document.getElementById(‘edit‘),
oParentInpt : document.getElementById(‘parentInpt‘),
oClear : document.getElementsByClassName(‘clear‘)[0],
//初始化方法
init : function(){
//点击编辑按钮
this.oEdit.onclick = this.editFunction;
},
//打开子页面，初始化子页面的宽高及位置
editFunction : function(){
var This = parentPage;
var oParentInptVal = This.oParentInpt.value;
This.oClear.style.display = ‘block‘;
window.open(‘son.html‘,window,‘height=500px,width=500px,left=500px,top=0px‘);
}
};
parentPage.init();
</script>
子页面：
html部分：
<!-- Author : 赵一鸣 Blog ： http://www.zymseo.com Time ： 2016/9/20 --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子页面</title> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <input type="text" id="sonInpt" /> <input type="button" value="保存" id="save"> </body> </html>
javascript部分：
<script type="text/javascript">
var sonPage = {
oSonInpt : document.getElementById(‘sonInpt‘),
oParentInpt : window.opener.document.getElementById(‘parentInpt‘),
oSave : document.getElementById(‘save‘),
//初始化方法
init : function(){
//子页面自动获取父页面的input值
this.oSonInpt.value = this.oParentInpt.value;
//点击保存按钮
this.oSave.onclick = this.saveFunction;
//监听用户是否点击了子页面的关闭窗口按钮，如果是，就传值
window.onbeforeunload = sonPage.sonToParent;
},
//保存
saveFunction : function(){
sonPage.sonToParent();
window.close();
},
//子页面给父页面传值，执行：
sonToParent : function(){
var This = sonPage;
var oSonInptVal = This.oSonInpt.value;
This.oParentInpt.value = oSonInptVal;
window.opener.document.getElementsByClassName(‘clear‘)[0].style.display = ‘none‘;
}
};
sonPage.init();
</script>
另外，你也可以用iframe实现同样的技术：我博客的WEB前端开发案例库中有一篇文章：《解决原生js或jQuery 实现父窗口的问题，如window.parent.document.getElementById》。
通过window对象的open()方法，open()方法将会产生一个新的window窗口对象。其用法为：
window.open(URL,windowName,parameters)；
URL: 描述要打开的窗口的URL地址，如何为空则不打开任何网页；
windowName:描述被打开的窗口的民称，可以使用‘_top‘、‘_blank‘等内建名称，这里的名称跟<a href="..." target="...">里的target属性是一样的。
parameters:描述被打开的窗口的参数值，或者说是样貌，其包括窗口的各个属性值，及要传入的参数值。
参数说明如下：
top=# 窗口顶部离开屏幕顶部的像素数；
left=# 窗口左端离开屏幕左端的像素数；
width=# 窗口的宽度；
height=# 窗口的高度；
menubar=... 窗口有没有菜单，取值yes或no；
toolbar=... 窗口有没有工具条，取值yes或no；
location=... 窗口有没有地址栏，取值yes或no；
directories=... 窗口有没有连接区，取值yes或no；
scrollbars=... 窗口有没有滚动条，取值yes或no；
status=... 窗口有没有状态栏，取值yes或no；
resizable=... 窗口给不给调整大小，取值yes或no；
以上是关于JavaScript用window.opener实现父窗口和子窗口传值的主要内容，如果未能解决你的问题，请参考以下文章
从源 WKWebView (window.opener) 访问 javascripts 函数