父子窗体互为传参(JS-BOM)

最新推荐文章于 2022-10-27 20:50:14 发布

iteye_9285

最新推荐文章于 2022-10-27 20:50:14 发布

阅读量118

点赞数

分类专栏： JavaScript 文章标签： JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/iteye_9285/article/details/81643869

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

费话就不说了，直接看代码．．．．．．

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>index.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript">
		
		<!-- 打开一般窗口 -->
		function openWin(){
			var childWin=window.open("childA.html","一般窗口","height:100px;width:100px;status:no;help:no;scroll:no");
			childWin.childFielda.value="一般窗口";
		}
		<!-- 打开模态窗口 -->
		function openModalWin(){
			window.param="模态窗口";
			var str=window.showModalDialog("childB.html",window,"dialogTop:200px;dialogLeft:300px;status:no;help:no;scroll:no");
			if(str!=null){
				document.getElementById("valueBack").value=str;
			}
		}
		</script>
	</head>
	<body>
		<input type="button" value="打开一般窗口" οnclick="openWin()" />
		<br />
		<input type="button" value="打开模态窗口" οnclick="openModalWin()" />
		<br />
		<input id="valueback" type="text" />
	</body>
</html>

childA.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>childA.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    	function backToWinA(){
    		window.opener.document.getElementById('valueBack').value=document.getElementById("childFieldaback").value;
    	}
    </script>
  </head>
  
  <body>
	<p>父口传到一般子窗口的值；
	<input id="childFielda" type="text"/>
	</p>
	<p>一般子窗口传回父页面的值
	<input id="childFieldaback" type="text"/>
	<input type="button" value="设置主页面值" οnclick="backToWinA()"/>
	</p>
  </body>
</html>

childB.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>childB.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    	function backToWinA(){
    		window.opener.document.getElementById('valueBack').value=document.getElementById("childFieldaback").value;
    	}
    </script>
  </head>
  
  <body>
	<p>父口传到模态窗口的值；
	<input id="childFielda" type="text"/>
	</p>
	<p>模态子窗口传回父页面的值
	<input id="childFieldbback" type="text"/>
	<input type="button" value="设置主页面值" οnclick="backToWinB()"/>
	</p>
	<script type="text/javascript">
	window.document.getElementById("childFielda").value=window.dialogArguments.param;
	var parentWin=window.dialogArguments;
	function backToWinB(){
		parentWin.document.getElementById("valueBack").value=document.getElementById("childFieldbback").value;
	}
	</script>
  </body>
</html>

先看一般窗口：

var childWin=window.open("childA.html","一般窗口","height:100px;width:100px;status:no;help:no;scroll:no");
childWin.childFielda.value="一般窗口";

childWin是父窗口引用子窗口对象，那么子窗口怎么引用父窗口对象呢？

window.opener.document.getElementById('valueBack').value=document.getElementById("childFieldaback").value;

window对象中有一个名为"opener"的属性，这一属性表示找开本窗口的父窗口的window对象.

其次我们在看看模态窗口:

var parentWin=window.dialogArguments;

此行代码使子窗口得到父窗口传过来的window对象.

iteye_9285

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父子窗体互为传参(JS-BOM)

费话就不说了，直接看代码．．．．．．index.html&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;index.html&lt;/title&gt; &lt;meta http-equiv="content
复制链接

扫一扫

专栏目录