首页 > 代码库 > JavaScript用window.opener实现父窗口和子窗口传值
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 = http://www.mamicode.com/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="http://www.mamicode.com/..." 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实现父窗口和子窗口传值