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

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

原创最新推荐文章于 2022-10-27 20:50:14 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何在不同类型的浏览器窗口之间进行数据传递，包括普通窗口和模态窗口。通过具体的HTML和JavaScript代码示例，展示了如何从父窗口向子窗口传递参数，并反过来将数据从子窗口返回给父窗口。

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

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="打开一般窗口" onclick="openWin()" />
		<br />
		<input type="button" value="打开模态窗口" onclick="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="设置主页面值" onclick="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="设置主页面值" onclick="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对象.