1. 程式人生 > >js實現父視窗和子視窗傳遞資料

js實現父視窗和子視窗傳遞資料

js實現父視窗和子視窗傳遞資料

1.test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父視窗</title>
<script>
function son(){//開啟子視窗
	s=window.open("son.html")
}
function close_son(){//關閉子視窗
	if(s){
		s.close();
		s=null;
	}
}
</script>
</head>
<body> <textarea id="text"></textarea><br> <input type="button" value="開啟子視窗" onclick="son()"><br> <input type="button" value="關閉子視窗" onclick="close_son()"> </body> </html>

2.son.html

<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"> <title>子視窗</title> <script> function request(){ var t=document.getElementById('input1').value;//獲取id為input1的值 window.opener.document.getElementById('text').innerHTML=t;//使父窗口裡id為text的區域顯示t的值 } </script> </head> <body> <input type="text" id="input1">
<br> <input type="button" value="提交資料" onclick="request()"><br> </body> </html>

建立子視窗的方法

  • 直接內嵌於標籤內(不通過js實現)
    <input type="text" id="" value="" onclick="new=open("son.html","sm","")">

關閉子視窗的方法

<input type="text" onclick="new.close()">

關於js中一些方法的理解

  • document.getElementById(“id”)的到是一個object(物件),需要得到值還需要使用.value,相關的方法請學習W3C

初學如有錯誤希望指出