[JS]跨頁面傳值

javascript 頁面傳值 html

希希寶 2021-07-01 09:20:05 ‧ 7859 瀏覽

分享至

初學前端網頁，在練習時遇到疑惑，請各位開導，謝謝！

情境：
在A.html上點下「開啟新視窗」按鈕，跳出B.html，在B.html內的文字框輸入文字後，點下「回傳」按鈕，B.html文字框內的值會送回到A.html的文字框內(且A.html不需要手動更新，於B.html點下「回傳」按鈕後A.html即顯示值)

目前撰寫的程式碼如下，我知道要在回傳按鈕的function內下指令，但是跨頁面傳送回A.html的部分需要求解...

【A.html】

<!DOCTYPE html>
<html>
<script>
	function btnOpen(){
        window.open ('B.html', 'B', config='height=560, width=700, top=200, left=700, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
	}
</script>
<body>

	<input type="text" name="txtReceive" id="txtReceive" />
	<br>
	<button onClick="btnOpen()" name="btnOpen" id="btnOpen" >開啟新視窗</button>

</body>
</html>

【B.html】

<!DOCTYPE html>
<html>
<script>
	function btnReturn(){
		var txtValue = document.getElementById('txtValue').value;
		
	}
</script>
<body>

	<button onClick="btnReturn()" name="btnReturn" id="btnReturn" >回傳</button>
	<br>
	<input type="text" name="txtValue" id="txtValue" />

</body>
</html>

archer9080 iT邦研究生 3 級 ‧ 2021-07-01 10:34:30 檢舉

open打開的話應該算是父子視窗傳值
href 跳轉的話應該能用url或是cookie

前端野人 iT邦新手 3 級 ‧ 2021-07-04 14:27:57 檢舉

可以參考postMessage

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

海綿寶寶

iT邦大神 1 級 ‧ 2021-07-01 09:39:04

最佳解答

試試看

function btnReturn() {
    var txtValue = document.getElementById('txtValue').value;
    opener.document.getElementById('txtReceive').innerHTML = txtValue;
};

參考資料來源