JavaScript使用window.open打开的页面进行数据交互的三种方案
作者：snow来了
本文主要介绍了在通过 window.open 打开新页面后,如何实现与原页面的数据交互,主要推荐使用 postMessage API 进行跨窗口通信,同时还提供了 localStorage+轮询和URL参数传递等备选方案,并分析了各自优缺点,需要的朋友可以参考下
场景： 在一个新增物资的页面上，我要点击按钮，执行 window.open()打开人员录入的工单。在人员工单上，我要填写完信息，点击提交按钮，就会产生一个人员申请的id出来。在提交完以后，我想要这个人员申请的id传到新增物资的页面上来。
解决方案：
使用 window.open() 打开新页面，这意味创建了一个完全独立的浏览器窗口/标签页，与原页面是两个独立的文档环境。
这两个页面的通信方式如下：
方案一：使用 postMessage API（推荐）
这是跨窗口通信的标准方式：
javascript
// 在原页面打开新窗口时
const newWindow = window.open(`/page/tickets/visitor/new`, '_blank');
// 监听来自新窗口的消息
window.addEventListener('message', (event) => {
// 验证消息来源（安全考虑）
if (event.origin !== window.location.origin) return;
if (event.data.type === 'PERSON_CREATED') {
const { id } = event.data.payload;
// 更新页面上的 ID 显示
setId(id);
}
});
// 在新页面提交成功后
// window.opener 指向打开当前窗口的窗口
window.opener.postMessage({
type: 'PERSON_CREATED',
payload: { id: newPersonId }
}, window.location.origin);
// 关闭当前窗口
window.close();
方案二：使用 localStorage + 轮询（适用于不能修改新页面的情况）
javascript
// 在原页面中
const newWindow = window.open(`/page/tickets/visitor/new`, '_blank');
// 轮询检查 localStorage 中是否有新创建的 ID
const checkForNewId = setInterval(() => {
const newPersonData = localStorage.getItem('newPersonCreated');
if (newPersonData) {
const { id } = JSON.parse(newPersonData);
setId(id);
localStorage.removeItem('newPersonCreated');
clearInterval(checkForNewId);
}
}, 1000);
// 在新页面提交成功后
localStorage.setItem('newPersonCreated', JSON.stringify({ id: newPersonId }));
window.close();
方案三：URL 参数传递 + 页面刷新监听
javascript
// 在原页面中
const newWindow = window.open(`/page/tickets/visitor/new`, '_blank');
// 监听新窗口关闭事件
const checkWindowClosed = setInterval(() => {
if (newWindow.closed) {
// 检查是否创建了新人员
const newPersonId = sessionStorage.getItem('newPersonId');
if (newPersonId) {
setId(newPersonId);
sessionStorage.removeItem('newPersonId');
}
clearInterval(checkWindowClosed);
}
}, 500);
// 在新页面提交成功后
sessionStorage.setItem('newPersonId', newPersonId);
window.close();
对于跨窗口通信场景，我最推荐使用方案一（postMessage API） ，因为：
- 它是现代浏览器提供的标准跨窗口通信方式
- 安全性更好（可以验证消息来源）
- 实时性更强（不需要轮询）
- 符合 Web API 的最佳实践
根据你项目的情况和安全要求，选择最适合的方案即可。
到此这篇关于JavaScript使用window.open打开的页面进行数据交互的三种方案的文章就介绍到这了,更多相关JavaScript window.open页面进行数据交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！