你的位置:首页 > Java教程

[Java教程]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;