JavaScript使用window.open打开的页面进行数据交互的三种方案

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();

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();

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();