iframe 商品库跳转按钮事件对接

最近更新时间：2026年5月27日

适用场景

本文适用于接入方通过 iframe 将保利威 SaaS 观看页嵌入到外部 H5 页面，并希望在用户点击商品库商品按钮后，由外部 H5 页面接收商品点击事件的场景。

典型诉求包括：

• 接入方 H5 页面通过 iframe 承载保利威 SaaS 观看页。
• 观看页内展示商品库商品。
• 用户点击商品按钮后，外部 H5 页面需要获取当前商品信息。
• 接入方希望在外部 H5 页面中自行处理埋点、自定义弹窗、跳转或小程序消息转发。

该事件是浏览器窗口间的 postMessage 通信。外部 H5 页面不监听该事件时，不影响商品库原有购买或跳转逻辑。

事件格式

用户在 iframe 内点击商品按钮后，商品库会向 iframe 父页面发送以下事件：

{
  source: 'polyv-product-ui',
  event: 'clickProductButton',
  data: {
    productData: {
      // 当前点击的商品信息
    },
    scene: 'productList'
  }
}

字段说明：

scene 内置取值如下：

H5 页面监听方式

监听代码需要写在承载 iframe 的外部 H5 页面中。建议先校验消息来源和事件类型，再处理商品数据。

window.addEventListener('message', function (event) {
  const message = event.data || {};

  if (message.source !== 'polyv-product-ui') return;
  if (message.event !== 'clickProductButton') return;

  const productData = message.data && message.data.productData;
  const scene = message.data && message.data.scene;

  console.log('收到商品按钮点击事件：', productData, scene);

  // 可在这里执行接入方自己的业务逻辑
  // 例如：埋点、自定义弹窗、自定义跳转、通知小程序等
});

如果外部 H5 页面只允许特定观看页域名发送消息，建议结合实际域名校验 event.origin，避免处理非预期页面发送的消息。

小程序 web-view 场景

如果接入方式是“小程序 <web-view> 打开接入方 H5 页面，接入方 H5 页面再通过 iframe 嵌入保利威 SaaS 观看页”，监听代码仍应写在接入方 H5 页面中。小程序页面本身不能直接监听 iframe 内部页面发送的 window.postMessage。

如需继续通知小程序，可在接入方 H5 页面收到事件后调用 wx.miniProgram.postMessage 转发。

window.addEventListener('message', function (event) {
  const message = event.data || {};

  if (message.source !== 'polyv-product-ui') return;
  if (message.event !== 'clickProductButton') return;

  if (window.wx && window.wx.miniProgram) {
    window.wx.miniProgram.postMessage({
      data: {
        source: 'polyv-product-ui',
        event: 'clickProductButton',
        productData: message.data && message.data.productData,
        scene: message.data && message.data.scene,
      },
    });
  }
});

在该场景下，如果接入方希望完全由外部 H5 页面承接商品按钮后的跳转链路，建议不要配置商品的浏览器链接，避免与外部 H5 的自定义处理逻辑重复。

验证方式

1. 在外部 H5 页面中通过 iframe 嵌入保利威 SaaS 观看页。
2. 在外部 H5 页面中添加 window.addEventListener('message', handler) 监听。
3. 在 iframe 内点击商品库商品按钮。
4. 确认监听器收到 source: 'polyv-product-ui'、event: 'clickProductButton' 的消息。
5. 确认 data.productData 中包含当前商品信息，data.scene 能区分点击来源。

postMessage 是浏览器窗口间通信，不是网络请求，因此无法通过 Charles 等抓包工具直接判断是否发送成功。建议通过浏览器控制台日志或接入方 H5 页面中的调试信息进行验证。