移动端浏览器（iOS/Android）Window postMessage功能失效问题

问题场景 #

基于Next.js开发的项目中，跨站点iframe通过postMessage传递数据的功能在PC端浏览器正常运行，但在iPhone移动端浏览器中完全失效，iframe无法接收并加载数据。

两端核心代码如下：

Next.js 父页面代码 #

useEffect(() => {
const handleLoad = () => {
  if (iframeRef.current) {
    iframeRef.current.contentWindow.postMessage(
      { data },
      process.env.IFRAME_LINK
    );
  }
};

if (iframeRef.current) {
  iframeRef.current.addEventListener('load', handleLoad);
}

return () => {
  if (iframeRef.current) {
    iframeRef.current.removeEventListener('load', handleLoad);
  }
};
}, [iframeRef.current]);

Vite React iframe页面代码 #

useEffect(() => {
const handleMessage = (event) => {
  const parentURL = import.meta.env.PARENT_URL;
  if (event.origin !== parentURL) return;
  let { data } = event.data;
  console.log('received');
  setUserData(data);
};

window.addEventListener('message', handleMessage);
return () => {
  window.removeEventListener('message', handleMessage);
};
}, []);

核心原因分析 #

1. Safari加载时机差异：iPhone Safari中iframe的load事件可能在内容未完全就绪时触发，此时contentWindow可能还不可用，导致postMessage发送失败。
2. Origin校验严格性：Safari对event.origin的匹配要求更苛刻，比如环境变量中的URL带有末尾斜杠，而实际event.origin没有，会导致校验不通过。
3. useEffect依赖不当：父页面中useEffect依赖iframeRef.current，可能导致事件监听重复绑定或绑定时机错误。

解决方案与代码修改 #

1. 父页面（Next.js）优化：适配Safari加载时机 #

改用readystatechange事件辅助监听，添加错误捕获与延迟重试，同时修正依赖数组：

useEffect(() => {
  const sendMessage = () => {
    if (!iframeRef.current) return;
    try {
      iframeRef.current.contentWindow.postMessage(
        { data },
        process.env.IFRAME_LINK
      );
    } catch (err) {
      console.error('postMessage发送失败:', err);
      // 延迟500ms重试，确保iframe完全就绪
      setTimeout(() => {
        iframeRef.current?.contentWindow.postMessage({ data }, process.env.IFRAME_LINK);
      }, 500);
    }
  };

  const handleLoad = () => sendMessage();
  const handleReadyStateChange = () => {
    if (iframeRef.current?.readyState === 'complete') sendMessage();
  };

  const iframe = iframeRef.current;
  if (iframe) {
    iframe.addEventListener('load', handleLoad);
    iframe.addEventListener('readystatechange', handleReadyStateChange);
   }

  return () => {
    if (iframe) {
      iframe.removeEventListener('load', handleLoad);
      iframe.removeEventListener('readystatechange', handleReadyStateChange);
    }
  };
}, [data]); // 依赖data而非iframeRef.current，避免不必要的重渲染

2. iframe页面（Vite React）优化：宽松Origin校验 #

统一URL格式，去掉末尾斜杠后再做匹配，同时添加错误捕获：

useEffect(() => {
  const handleMessage = (event) => {
    const parentURL = import.meta.env.PARENT_URL;
    // 标准化URL：移除末尾斜杠，确保origin匹配一致
    const normalizedExpectedOrigin = parentURL.replace(/\/$/, '');
    const normalizedEventOrigin = event.origin.replace(/\/$/, '');

    if (normalizedEventOrigin !== normalizedExpectedOrigin) {
      console.warn('Origin不匹配：', event.origin, '预期：', parentURL);
      return;
    }

    try {
      const { data } = event.data;
      console.log('收到数据:', data);
      setUserData(data);
    } catch (err) {
      console.error('解析postMessage数据失败:', err);
    }
  };

  window.addEventListener('message', handleMessage);
  return () => {
    window.removeEventListener('message', handleMessage);
  };
}, []);

额外排查点 #

• 用Mac连接iPhone，通过Safari开发者工具查看控制台报错，定位具体问题。
• 确认环境变量IFRAME_LINK和PARENT_URL的正确性：协议（http/https）、域名、端口必须完全一致，无多余斜杠。
• 临时测试时可将postMessage的targetOrigin设为'*'（生产环境禁止），验证是否是origin校验导致的问题。

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