JavaScript用window.opener实现父窗口和子窗口传值

阅读() @2018-10-29 18:16:07

在实际项目中经常会有这样的需求,点击某个按钮弹出对话框,对话框中可以编辑和修改相应的内容,然后再保存并关闭窗口,如果写一个静态的div作为显示隐藏,倒也可以,但是还得调整样式,麻烦点。现在用window.open就可以实现同样的效果,父页面和子页面照样传值。

demo代码如下:

父页面:

<!--
	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>
<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>

子页面:

<!--
	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>
<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实现同样的技术:《解决原生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;

加入QQ群,在群文件中免费下载源码提取密码!
微信二维码