快捷導(dǎo)航

如何通過JavaScript來實現(xiàn)頁面間數(shù)據(jù)傳遞

更新時間：2023年11月21日 09:31:06 作者：hope?for?mankind

這篇文章主要給大家介紹了關(guān)于如何通過JavaScript來實現(xiàn)頁面間數(shù)據(jù)傳遞的相關(guān)資料,在前端開發(fā)中我們常常需要從一個跳到另一個頁面,并且將當(dāng)前頁面的數(shù)據(jù)傳遞過去,需要的朋友可以參考下

知識點

1、Window. opener 屬性是一個可讀可寫的屬性，使用 window.open 打開的兩個窗口之間存在著關(guān)系“父子”關(guān)系。子窗口可以通過 window.opener 指向父窗口，訪問父窗口的對象。優(yōu)點：取值方便。只要 opener 指向父窗口，就可以訪問所有對象。不僅可以訪問值，還可以訪問父窗口的方法。值長度無限制。缺點：兩窗口要存在著關(guān)系。就是需要使用 open 打開窗口，不能跨域。

2、Window.cloes方法只能關(guān)閉由自己打開的window,但實際應(yīng)用中會有很多方式打開一個頁面

用多種方式打開一個頁面，然后用 window.close() 關(guān)閉它，在各瀏覽器下表現(xiàn)是有所不同的

3、onlick單擊事件

4、input標(biāo)簽規(guī)定用戶可輸入數(shù)據(jù)的輸入字段

5、value 屬性為 input 元素規(guī)定值。

6、butten屬性按鈕

項目名稱描述

名稱為頁面?zhèn)鬟f數(shù)據(jù),通過JavaScript來實現(xiàn)頁面間數(shù)據(jù)傳遞.

項目效果

項目代碼

代碼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(){
//實現(xiàn)跳轉(zhuǎn)功能，xuanze.html為要跳轉(zhuǎn)的頁面,設(shè)置其寬和高
				window.open("xuanze.html","","width = 300px,height = 300px");
			}
		</script>
	</head>

	<body align="center">
//編寫第一個頁面，其中有一個按鈕實現(xiàn)跳轉(zhuǎn)
		編號：<input type="text" id="id1"><br/> 
		姓名：<input type="text" id="id2"><br/>
//按鈕實現(xiàn)跳轉(zhuǎn)
		<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屬性是獲取創(chuàng)建這個頁面的頁面,在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()方法打開彈出的頁面,其中有個按鈕實現(xiàn)跳轉(zhuǎn),點擊按鈕實現(xiàn)跳轉(zhuǎn)“xuanze.html”頁面,選擇其中一個值,相應(yīng)的值會返回到前一個頁面，實現(xiàn)頁面?zhèn)鬏敂?shù)據(jù)