脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS页面间数据传递

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

 更新时间：2023年11月21日 09:31:06   作者：hope for mankind  
这篇文章主要给大家介绍了关于如何通过JavaScript来实现页面间数据传递的相关资料,在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,需要的朋友可以参考下

知识点

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>

完成思路

首先编写第一个页面“打开xuanze.html”以及第二个页面"xuanze.html",目的是制作页面,使用open()方法打开弹出的页面,其中有个按钮实现跳转,点击按钮实现跳转“xuanze.html”页面,选择其中一个值,相应的值会返回到前一个页面，实现页面传输数据

本项目目的

理解window对象模型的概念

掌握open（）方法的应用

掌握windon.opener属性的应用

到此这篇关于如何通过JavaScript来实现页面间数据传递的文章就介绍到这了,更多相关JS页面间数据传递内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论