在前端中，可以通过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>
463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
