Postmessage 功能在移动设备中不起作用，但在桌面上有效-解网

问：

我正在尝试创建小部件，该小部件将有一个按钮，当有人单击该按钮时，会出现一个弹出窗口。该弹出窗口也包含按钮，可以完成任务。

这是弹出代码-

<div class="modal" id="myModal">
        <div class="modal-content">
            <span class="close-btn" id="closeModalBtn">&times;</span>
            <iframe id="modelIframe" src="base_url/modelviewer.html" style="width: 280px; height: 200px;" allow="xr-spatial-tracking" frameborder="0"></iframe>
            <p>View this product in 3D</p>
            <button id="activateAR" style="padding: 10px 10px;border: none; ">See in 3D</button> 
        </div>
    </div>

因此，当这个 poup 可见并且用户单击按钮（ID 为“activateAR”）时，我调用以下函数 -

function activateARFunction() {
    console.log("data",document);
    const iframe = document.getElementById('modelIframe');
    iframe.contentWindow.postMessage('activateAR', '*');     
}


document.getElementById('activateAR').addEventListener('click', activateARFunction);

以及（我收到消息的地方）-modelviewer.html

<script>
window.addEventListener('message', (event) => {
    console.log("button without data ","received");
    if (event.data === 'activateAR') {
        console.log("button ","received");
         
    }
});
</script>

当我在桌面上运行这段代码时，我接收数据，即modelviewer.htmlpostmessage

console.log("button without data ","received");

但是，当我在移动设备中运行它时，它不会打印任何内容。控制台中也没有错误。

JavaScript iframe 后消息

我所说的“在视图中”的真正含义是在视口中，即当您单击按钮时可以看到其内容。IIRC 进行了一些实验，基本上卸载了视口之外的 iframe 以节省电池，这样的实验可能会导致阻止消息事件到达 iframe 的 bug。无论如何，您是否尝试过联系 Chrome 的团队？这是一个错误，他们应该知道它。（操作系统部分也很重要，因为iOS浏览器实际上都是Safari）

0赞 Ankur_009 10/27/2023

@Kaiido我尝试将“alert（”hello“）”放在窗口内。addEventListener 及其工作。所以这意味着我的帖子正在工作，而问题是其他事情。但是控制台.log仍然没有打印。

答：

-2赞 jsejcksn 10/27/2023 #1

但是，当我在移动设备中运行它时，它不会打印任何内容。控制台中也没有错误。

我无法重现您的问题。您是否希望在没有远程调试的情况下在移动设备浏览器上看到控制台输出？如果是这样，这可能是造成混乱的原因。

下面是一个独立的示例，可用于重现成功。该示例直接更新 DOM 中的文本内容，以便可以在浏览器视口中看到反馈，而无需在调试器中查看 JavaScript 控制台流：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>so-77349441</title>
  <style>#modelIframe { display: block; height: 2rem; width: 20rem; }</style>
  <script type="module">
    function activateARFunction() {
      const iframe = document.getElementById("modelIframe");
      iframe.contentWindow.postMessage("activateAR", { targetOrigin: "*" });
    }
  
    document.getElementById("activateAR").addEventListener(
      "click",
      activateARFunction,
    );
  </script>
</head>
<body>
  <div>
    <!--
      The value of the "src" attribute in the iframe element below
      is a base64 encoded representation of the following HTML (because Stack
      Overflow does not allow for multiple resources in code snippets):

      <!doctype html>
      <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script type="module">
          window.addEventListener("message", (event) => {
            document.body.textContent = "Message received";
            if (event.data === "activateAR") {
              document.body.textContent = "Expected message received";
            }
          });
        </script>
      </head>
      <body>Awaiting message...</body>
      </html>
    -->
    <iframe
      id="modelIframe"
      src="data:text/html;base64,PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8+CiAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xIiAvPgogIDxzY3JpcHQgdHlwZT0ibW9kdWxlIj4KICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCJtZXNzYWdlIiwgKGV2ZW50KSA9PiB7CiAgICAgIGRvY3VtZW50LmJvZHkudGV4dENvbnRlbnQgPSAiTWVzc2FnZSByZWNlaXZlZCI7CiAgICAgIGNvbnN0IGV4cGVjdGVkID0gImFjdGl2YXRlQVIiOwogICAgICBpZiAoZXZlbnQuZGF0YSA9PT0gZXhwZWN0ZWQpIHsKICAgICAgICBkb2N1bWVudC5ib2R5LnRleHRDb250ZW50ID0gIkV4cGVjdGVkIG1lc3NhZ2UgcmVjZWl2ZWQiOwogICAgICB9CiAgICB9KTsKICA8L3NjcmlwdD4KPC9oZWFkPgo8Ym9keT5Bd2FpdGluZyBtZXNzYWdlLi4uPC9ib2R5Pgo8L2h0bWw+"
    ></iframe>
    <button id="activateAR">Click</button>
  </div>
</body>
</html>

-1赞 ChipChop Gizmo 10/29/2023 #2

不，不要与移动浏览器作斗争，你会衰老得太快！

只需在父级中实现一个简单的消息接收器函数，然后从 iframe 发送回您想要控制台的任何内容 .log

上一个：Mixcloud Widget API：无法在“DOMWindow”上执行“postMessage”

下一个：当事件在 React Native Web View 的嵌入式 Calendly 小部件中调度时，如何运行代码？

Postmessage 功能在移动设备中不起作用，但在桌面上有效

Postmessage function is not working in mobile but working in desktop

评论