js操作模态窗口及父子窗口间相互传值

最新推荐文章于 2021-06-04 18:26:48 发布

颠坤

最新推荐文章于 2021-06-04 18:26:48 发布

阅读量2.9k

点赞数

分类专栏： javascript JavaScript高级程序设计之点滴文章标签： javascript 模态窗口相互传值

本文链接：https://blog.csdn.net/wobendiankun/article/details/27244701

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

JavaScript高级程序设计之点滴

9 篇文章 2 订阅

订阅专栏

parent.hmtl

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>父窗口</title>
<script type="text/javascript">
	
	window.οnlοad=function(){
		var btn=document.getElementById("btn");
		btn.οnclick=function(){
			var obj={
					test:"张三传到子窗口",
					win:window
			};
			var returnValue = window.showModalDialog("child.html",obj,"dialogLeft:100px;dialogTop:100px;dialogWidth:400px;dialogHeight:300px;resizable:yes");
			if(returnValue != null){
				document.getElementById("content").innerHTML = returnValue;
			}
		};
	}
</script>
</head>
<body>
<div id="content" style="margin:50px;width:100px;height:150px;border:5px solid #0000ff;"></div>
<input type="button" id="btn" value="弹出子窗口">
</body>
</html>

child.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>子窗口</title>
<script type="text/javascript">
	window.οnlοad=function(){
		//获取url的传参
		var args = window.dialogArguments;
		var win = args.win;//父窗口对象
		var content=document.getElementById("content");
		content.value=args.test;
		var btn=document.getElementById("btn");
		btn.οnclick=function(){
			//模态对话框将值
			window.returnValue = content.value;
			window.close();
		}
	}
</script>
</head>
<body>
<input type="text" id="content"><input type="button" id="btn" value="传值给父窗口">
</body>
</html>

颠坤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js操作模态窗口及父子窗口间相互传值

parent.hmtl父窗口 window.onload=function(){ var btn=document.getElementById("btn"); btn.onclick=function(){ var obj={ test:"张三传到子窗口", win:window }; var returnValue
复制链接

扫一扫

专栏目录