快捷導(dǎo)航

如何通過(guò)JavaScript來(lái)實(shí)現(xiàn)頁(yè)面間數(shù)據(jù)傳遞

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

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

知識(shí)點(diǎn)

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

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

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

3、onlick單擊事件

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

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

6、butten屬性按鈕

項(xiàng)目名稱(chēng)描述

名稱(chēng)為頁(yè)面?zhèn)鬟f數(shù)據(jù),通過(guò)JavaScript來(lái)實(shí)現(xiàn)頁(yè)面間數(shù)據(jù)傳遞.

項(xiàng)目效果

項(xiàng)目代碼

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

	<body align="center">
//編寫(xiě)第一個(gè)頁(yè)面，其中有一個(gè)按鈕實(shí)現(xiàn)跳轉(zhuǎn)
		編號(hào)：<input type="text" id="id1"><br/> 
		姓名：<input type="text" id="id2"><br/>
//按鈕實(shí)現(xiàn)跳轉(zhuǎn)
		<input id="choose" type="button" value="點(diǎn)擊選擇" 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)建這個(gè)頁(yè)面的頁(yè)面,在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>

完成思路

首先編寫(xiě)第一個(gè)頁(yè)面“打開(kāi)xuanze.html”以及第二個(gè)頁(yè)面"xuanze.html",目的是制作頁(yè)面,使用open()方法打開(kāi)彈出的頁(yè)面,其中有個(gè)按鈕實(shí)現(xiàn)跳轉(zhuǎn),點(diǎn)擊按鈕實(shí)現(xiàn)跳轉(zhuǎn)“xuanze.html”頁(yè)面,選擇其中一個(gè)值,相應(yīng)的值會(huì)返回到前一個(gè)頁(yè)面，實(shí)現(xiàn)頁(yè)面?zhèn)鬏敂?shù)據(jù)

本項(xiàng)目目的

理解window對(duì)象模型的概念

掌握open（）方法的應(yīng)用

掌握windon.opener屬性的應(yīng)用

到此這篇關(guān)于如何通過(guò)JavaScript來(lái)實(shí)現(xiàn)頁(yè)面間數(shù)據(jù)傳遞的文章就介紹到這了,更多相關(guān)JS頁(yè)面間數(shù)據(jù)傳遞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: