通过JavaScript来实现页面间数据传递

hope for mankind

已于 2023-04-14 22:52:51 修改

阅读量2.6k

点赞数 4

文章标签： javascript 前端

于 2023-04-14 09:40:24 首次发布

本文链接：https://blog.csdn.net/2301_77405158/article/details/130146099

版权

知识点

1、Window. opener 属性是一个可读可写的属性，使用 window.open 打开的两个窗口之间存在着关系“父子”关系。子窗口可以通过 window.opener 指向父窗口，访问父窗口的对象。优点：取值方便。只要 opener 指向父窗口，就可以访问所有对象。不仅可以访问值，还可以访问父窗口的方法。值长度无限制。缺点：两窗口要存在着关系。就是需要使用 open 打开窗口，不能跨域。

2、Window.cloes方法只能关闭由自己打开的window,但实际应用中会有很多方式打开一个页面

用多种方式打开一个页面，然后用 window.close() 关闭它，在各浏览器下表现是有所不同的

3、onlick单击事件

4、input标签规定用户可输入数据的输入字段

5、value 属性为 input 元素规定值。

6、butten属性按钮

项目名称描述

名称为页面传递数据,通过JavaScript来实现页面间数据传递.

项目效果

项目代码
代码1

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>BOM案例</title>
		<style>
			#id1{
				width: 50px;
				height: 50px;
				background: yellow;
			}
			#id2{
				width: 50px;
				height: 50px;
				background: green;
			}
			#choose{
				width: 110px;
				height: 110px;
				background: red;
			}
		</style>
		<script language="JavaScript">
			function SelectInput(){
//实现跳转功能，xuanze.html为要跳转的页面,设置其宽和高
				window.open("xuanze.html","","width = 300px,height = 300px");
			}
		</script>
	</head>

	<body align="center">
//编写第一个页面，其中有一个按钮实现跳转
		编号：<input type="text" id="id1"><br/> 
		姓名：<input type="text" id="id2"><br/>
//按钮实现跳转
		<input id="choose" type="button" value="点击选择" onclick="SelectInput()">
	</body>
</html>

代码2

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table, table td {
				border: 1px solid #000000;
				border-collapse: collapse;
			}
			#btn1{
				width: 50px;
				height: 50px;
				background: yellow;
			}
			#btn2{
				width: 50px;
				height: 50px;
				background: green;
			}
		</style>
		<script>
			function dome1(num1,nam1){
//window的oper属性是获取创建这个页面的页面,在360浏览器不兼容
				var fuYueMain = window.opener;
				var p1 = fuYueMain.document.getElementById("id1");
				p1.value = num1;
				var p2 = fuYueMain.document.getElementById("id2");
				p2.value = nam1;
				window.close();
			}
		</script>
	</head>

	<body>
		<table>
			<tr>
				<td>
					<input type="button" value="选择" onclick="dome1('0010','小米');"/>
				</td>
				<td><font>0010</font></td>
				<td><font>小米</font></td>
			</tr>
			<tr>
				<td>
					<input type="button" value="选择" onclick="dome1('0012','小含');"/>
				</td>
				<td><font>0012</font></td>
				<td><font>小含</font></td>
			</tr>
		</table>
	</body>

</html>