无需WebSockets/Node.js，PHP页面间JS实现新建客户后回填编号方案咨询

方案一：同源窗口直接调用（依赖窗口引用） #

这种方案适合发票页未被刷新的场景，利用window.open()返回的窗口对象，在客户管理页直接调用父窗口的回调函数完成回填。

发票页（invoice.php）代码 #

<!-- 客户编号输入框 -->
<input type="text" id="customer-id-input" placeholder="客户编号">
<!-- 打开客户管理页的按钮 -->
<button id="open-customer-page">快速创建客户</button>

<script>
let customerWindow;

// 绑定按钮点击事件，打开客户管理页
document.getElementById('open-customer-page').addEventListener('click', function() {
  // 打开新标签页并保存窗口引用，指定窗口参数可选
  customerWindow = window.open('/customer-management.php', '_blank', 'width=800,height=600');
  
  // 定时检查窗口是否关闭，清理无效引用
  const checkClosed = setInterval(() => {
    if (customerWindow?.closed) {
      clearInterval(checkClosed);
      customerWindow = null;
    }
  }, 500);
});

// 暴露给客户管理页调用的回填函数
window.fillCustomerId = function(customerId) {
  document.getElementById('customer-id-input').value = customerId;
};
</script>

客户管理页（customer-management.php）代码 #

假设PHP处理完客户创建逻辑后，将新生成的客户编号传递给JS：

<?php
// 假设这里是创建客户的逻辑，生成$newCustomerId
$newCustomerId = 'CUST-20240501-001'; // 示例编号
?>

<script>
// 客户创建完成后的处理函数
function handleCustomerCreated(customerId) {
  // 验证父窗口是否存在且未关闭
  if (window.opener && !window.opener.closed) {
    // 调用父窗口的回填函数
    window.opener.fillCustomerId(customerId);
  }
  
  // 自动关闭当前标签页
  window.close();
}

// 页面加载完成后执行（如果是创建成功后跳转到此页）
window.addEventListener('load', function() {
  handleCustomerCreated('<?php echo $newCustomerId; ?>');
});
</script>

方案二：localStorage + Storage事件（无窗口依赖） #

如果担心发票页被刷新导致窗口引用失效，可以用localStorage存储临时数据，发票页监听storage事件获取新客户编号，兼容性更稳定。

发票页代码 #

<input type="text" id="customer-id-input" placeholder="客户编号">
<button id="open-customer-page">快速创建客户</button>

<script>
// 监听storage事件，获取新客户编号
window.addEventListener('storage', function(e) {
  if (e.key === 'newCustomerId') {
    document.getElementById('customer-id-input').value = e.newValue;
    // 清理临时存储的数据，避免重复回填
    localStorage.removeItem('newCustomerId');
  }
});

// 打开客户管理页的按钮事件
document.getElementById('open-customer-page').addEventListener('click', function() {
  window.open('/customer-management.php', '_blank', 'width=800,height=600');
});
</script>

客户管理页代码 #

<?php
$newCustomerId = 'CUST-20240501-001'; // 生成的新客户编号
?>

<script>
function handleCustomerCreated(customerId) {
  // 将客户编号存入localStorage
  localStorage.setItem('newCustomerId', customerId);
  // 关闭当前标签页
  window.close();
}

window.addEventListener('load', function() {
  handleCustomerCreated('<?php echo $newCustomerId; ?>');
});
</script>

关键注意事项 #

• 同源策略限制：两个页面必须在同一域名、协议、端口下，否则浏览器会阻止窗口间的直接访问或storage事件监听。
• 方案一的局限性：如果用户在打开客户管理页后刷新了发票页，窗口引用会失效，导致无法回填；方案二则不受此影响。
• 自动关闭标签页：window.close()只能关闭由JSwindow.open()打开的标签页，手动打开的标签页无法通过JS强制关闭。

内容的提问来源于stack exchange，提问作者Dave33