移动端postMessage函数失效但桌面端正常，求技术排查方案

开发组件场景：点击按钮弹出弹窗，弹窗内的activateAR按钮触发activateARFunction，通过postMessage向iframe中的modelviewer.html发送消息。桌面端可正常接收日志，但移动端无输出且无控制台报错，以下是针对性排查和解决方法：

1. 确保iframe完全加载后再发送消息 #

移动端网络加载速度不稳定，若iframe未加载完成就发送消息，接收端的message监听事件还未注册，自然无法响应。

修改调用逻辑，等待iframe加载完成后再绑定按钮事件：

// 监听iframe加载完成事件
document.getElementById('modelIframe').addEventListener('load', () => {
  const activateBtn = document.getElementById('activateAR');
  activateBtn.addEventListener('click', activateARFunction);
});

function activateARFunction() {
    const iframe = document.getElementById('modelIframe');
    // 额外校验iframe状态，确保可通信
    if (iframe.contentWindow && iframe.readyState === 'complete') {
        iframe.contentWindow.postMessage('activateAR', '*');     
    }
}

2. 明确postMessage的目标源，避免安全限制 #

桌面端使用通配符*可正常工作，但移动端浏览器同源策略限制更严格，明确指定目标源（modelviewer.html所在的完整域名），同时在接收端验证发送源：

发送端修改： #

// 替换为modelviewer.html实际所在的域名，比如https://your-domain.com
iframe.contentWindow.postMessage('activateAR', 'https://your-domain.com');

接收端（modelviewer.html）修改： #

window.addEventListener('message', (event) => {
    // 验证发送消息的父页面域名，替换为实际父页面域名
    if (event.origin !== 'https://parent-page-domain.com') return;
    
    console.log("button without data ","received");
    if (event.data === 'activateAR') {
        console.log("button ","received");
    }
});

3. 兼容移动端触摸事件 #

部分移动端浏览器对click事件响应存在延迟，或弹窗环境下click事件未正确触发，可同时绑定touchstart事件：

const activateBtn = document.getElementById('activateAR');
// 绑定click事件
activateBtn.addEventListener('click', activateARFunction);
// 绑定touchstart事件，避免点击延迟
activateBtn.addEventListener('touchstart', (e) => {
  e.preventDefault(); // 防止同时触发click和touchstart导致重复操作
  activateARFunction();
});

4. 检查iframe权限配置 #

移动端对XR相关权限的校验更严格，补充iframe的allow属性，确保包含必要权限：

<iframe id="modelIframe" src="base_url/modelviewer.html" 
        style="width: 280px; height: 200px;" 
        allow="xr-spatial-tracking; fullscreen" 
        frameborder="0">
</iframe>

5. 移动端远程调试排查 #

若以上方法无效，使用浏览器远程调试工具（如Chrome DevTools调试安卓设备），直接查看iframe的控制台输出，确认是否有隐藏报错，或postMessage是否实际发送成功。

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