如何从新窗口页面调用SPA（PWA）中的导入模块函数并传参？

方案1：利用window.opener直接调用（仅适用于价目表页面由SPA通过window.open打开的场景） #

新打开的价目表页面可通过window.opener引用打开它的SPA窗口，只要SPA把购物车相关函数暴露到全局作用域，就能直接调用。

SPA侧代码 #

// 假设你的购物车模块函数是这样的
import { addToCart } from './cartModule.js';

// 将函数挂载到window全局，供子页面调用
window.addToCartFromPriceList = (partNumber) => {
  addToCart(partNumber);
  // 可选：添加成功后给价目表页面反馈
  window.opener.postMessage('added', window.location.origin);
};

// 打开价目表页面的按钮事件
document.getElementById('openPriceListBtn').addEventListener('click', () => {
  window.open('/price-list.html', '_blank');
});

价目表页面代码 #

<!-- 价目表中的零件项 -->
<div class="part-item">
  <span>零件号：P12345</span>
  <button onclick="addToSPACart('P12345')">加入购物车</button>
</div>

<script>
function addToSPACart(partNumber) {
  // 检查opener是否存在且函数可用
  if (window.opener && typeof window.opener.addToCartFromPriceList === 'function') {
    window.opener.addToCartFromPriceList(partNumber);
    // 监听SPA的反馈
    window.addEventListener('message', (e) => {
      if (e.origin === window.opener.location.origin && e.data === 'added') {
        alert('已成功加入购物车');
      }
    });
  } else {
    alert('无法连接到主应用');
  }
}
</script>

方案2：使用Broadcast Channel API（跨标签页通用，同源即可） #

这是浏览器原生的跨标签页通信API，适合价目表页面不是通过window.open打开的场景（比如用户手动打开的同源页面）。

SPA侧代码 #

import { addToCart } from './cartModule.js';

// 创建广播频道
const cartChannel = new BroadcastChannel('spa-cart-channel');

// 监听价目表页面发来的消息
cartChannel.addEventListener('message', (e) => {
  if (e.data.type === 'add-part') {
    addToCart(e.data.partNumber);
    // 可选：发送确认消息
    cartChannel.postMessage({ type: 'added', partNumber: e.data.partNumber });
  }
});

价目表页面代码 #

<div class="part-item">
  <span>零件号：P67890</span>
  <button onclick="sendToSPACart('P67890')">加入购物车</button>
</div>

<script>
const cartChannel = new BroadcastChannel('spa-cart-channel');

function sendToSPACart(partNumber) {
  cartChannel.postMessage({
    type: 'add-part',
    partNumber: partNumber
  });

  // 监听SPA的确认消息
  cartChannel.addEventListener('message', (e) => {
    if (e.data.type === 'added' && e.data.partNumber === partNumber) {
      alert('已成功加入购物车');
    }
  });
}
</script>

方案3：使用sessionStorage + storage事件监听 #

通过存储介质传递数据，SPA监听存储变化来触发购物车操作，兼容性好。

SPA侧代码 #

import { addToCart } from './cartModule.js';

// 监听storage变化事件
window.addEventListener('storage', (e) => {
  if (e.key === 'add-to-cart-part') {
    const partNumber = e.newValue;
    addToCart(partNumber);
    // 清空存储，避免重复触发
    sessionStorage.removeItem('add-to-cart-part');
    alert('已成功加入购物车');
  }
});

价目表页面代码 #

<div class="part-item">
  <span>零件号：P01234</span>
  <button onclick="setPartToCart('P01234')">加入购物车</button>
</div>

<script>
function setPartToCart(partNumber) {
  // 设置sessionStorage触发SPA的监听
  sessionStorage.setItem('add-to-cart-part', partNumber);
}
</script>

注意：以上方案均要求SPA和价目表页面同源（协议、域名、端口一致），这是浏览器同源策略的要求。如果是非同源场景，需要通过跨域消息传递（postMessage）配合SPA的后端接口来实现。

内容的提问来源于stack exchange，提问作者Let's App