在前端中，可以通過window.open打開新窗口，那麼新窗口可以與舊窗口進行數據交互嗎？
答案當然是可以的，父窗口在打開子窗口時，子窗口的window對象會有一個opener打開者，代表的正是父窗口的window對象，我們可以通過這個opener對象對父窗口進行操縱。
以下代碼請在一個項目中使用，用本地文件來調試，opener對象無效
父窗口
<html !DOCTYPE>
<head>
<title>父窗口</title>
</head>
<body>
<form>
<input type="button" id="forward" value="打開子窗口" onclick="open()">
<br>
子窗口選擇的城市爲：<input type="text" id="city">
</form>
<script>
function open(){
var subWindowURL = "subWindow.html"; //填子窗口的路徑
var style = "width=470,height=150,scrollbars=no,resizable=no";
window.open(subWindowURL, "子窗口", style);
document.getElementById("forward").value = "已打開子窗口";
}
</script>
</body>
</html>
子窗口
<html !DOCTYPE>
<head>
<title>子窗口</title>
</head>
<body>
<form>
選擇：
<select onchange="returnCity(this.value)">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
<option value="廣州">廣州</option>
<option value="天津">天津</option>
</select>
<input type="button" value="關閉子窗口" onclick="close()">
<br>
子窗口選擇的城市爲：<input type="text" id="city">
</form>
<script>
function close(){
//window.opener表示父窗口的window對象
var doc = window.opener.document;
//將父窗口的打開按鈕狀態由"已打開子窗口"改爲"打開子窗口"
doc.getElementById("forward").value = "打開子窗口";
window.close();
}
function returnCity(city){
//獲取父窗口的document對象
var doc = window.opener.document;
//將選擇的城市傳遞到父窗口中顯示
doc.getElementById("city").value = city;
}
</script>
</body>
</html>