JavaScript 使用 window.open 实现父子窗口数据交互

JavaScript 使用 window.open 实现父子窗口数据交互

本文详细介绍了一种在 JavaScript 中实现浏览器窗口间数据传递的解决方案，旨在为开发者提供实用的参考案例。

核心思路概述

交互原理与场景

在 Web 开发过程中，弹窗交互十分常见。实现方式包括使用 div 模拟、嵌入 iframe，或利用浏览器原生的 window.open 方法打开新窗口。本文将重点讲解最后一种方式，即通过 window.open 打开新页面并实现双向数据交互。首先，让我们通过效果图直观了解其运行结果。

交互原理

数据传递采用双向机制：父窗口向子窗口传递数据时，通过拼接在 URL 中的查询参数实现；而子窗口向父窗口回传数据时，则通过调用父窗口定义的全局函数来完成。

代码实现

具体实现代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<button id="test">按钮</button>
<script>
var test = document.getElementById('test');
test.onclick = function() {
window.open('./window.html?param1=name&param2=password', '_blank','width=960,height=650,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes');
        };
window.getContent = function(tx) {
document.getElementById('content').innerText = tx;
        }
</script>
</body>
</html>

以下是子窗口 window.html 的代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<select name="" id="city">
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
</select>
<script>
var params = location.href.substring(location.href.lastIndexOf('?')+1).split('&');
document.getElementById('content').innerText = params;
var city = document.getElementById('city');
city.onchange = function() {
window.opener.getContent(city.value);
        }
</script>
</body>
</html>

注意事项：上述示例代码需要在本地服务器环境下运行才能正常获取文件资源及执行交互逻辑。

希望本文提供的 JavaScript 程序设计思路能对您的项目开发有所帮助。