BOM之Window案例

最新推荐文章于 2022-06-29 20:33:46 发布

一抔石楠花

最新推荐文章于 2022-06-29 20:33:46 发布

阅读量536

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： JavaScript BOM

本文链接：https://blog.youkuaiyun.com/ITShang/article/details/53399032

JS 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个简单的网页数据交互案例，展示了如何通过打开新窗口让用户选择数据，并将所选数据回传到主窗口进行显示。案例使用了基本的HTML与JavaScript实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：主窗口有用户编号和姓名文本框，点击选择，打开新窗口，选择对应人名，人名和编号会出现在第一个窗口中，新打开的窗口随之关闭。

提示：谷歌浏览器看不到效果，用IE。

主窗口

<body>
	<div>
		用户编号:<input type="text" id="ID" /><br/>
		用户姓名:<input type="text" id="name" /><br/>
		<input type="button" value="选择" onclick="run1()"/>
		
	</div>
</body>
<script type="text/javascript">
	//alert(window.document.getElementById("ID").value);
	function run1()
	{
		window.open("eg1ps.html", "", "width=300,height=300");
	}
</script>

打开的窗口

<body>
	<table border="1" width="100%">
		<tr align="center">
			<th>操作</th>
			<th>编号</th>
			<th>姓名</th>
		</tr>
		<tr align="center">
			<td>
				<input type="button" value="选择" onclick="run1()"/>
			</td>
			<td id="id1">1</td>
			<td id="name1">Ramon</td>
			
		</tr>
		<tr align="center">
			<td>
				<input type="button" value="选择" id="2" onclick="run2()"/>
			</td>
			<td id="id2">2</td>
			<td id="name2">Ali</td>
		</tr>
		<tr align="center">
			<td>
				<input type="button" value="选择" id=3 onclick="run3()"/>
			</td>
			<td id="id3">3</td>
			<td id="name3">Aryan</td>
		</tr>
	</table>
</body>
<script type="text/javascript">
	
	var windows=window.opener;
	function run1(){
		var i=window.document.getElementById("id1").innerHTML;
		var n=window.document.getElementById("name1").innerHTML;
	    	windows.document.getElementById("ID").value=i;
		windows.document.getElementById("name").value=n;
		window.close();
	}
	function run2(){
		var i=window.document.getElementById("id2").innerHTML;
		var n=window.document.getElementById("name2").innerHTML;
	        windows.document.getElementById("ID").value=i;
		windows.document.getElementById("name").value=n;
		window.close();
	}
	function run3(){
		var i=window.document.getElementById("id3").innerHTML;
		var n=window.document.getElementById("name3").innerHTML;
	    	windows.document.getElementById("ID").value=i;
		windows.document.getElementById("name").value=n;
		window.close();
	}
</script>