postMessage 到 iFrame 无法通过 GTM 工作

问题描述 投票:0回答:1

我面临着一个奇怪的情况。我编写了一段代码,该代码应该通过 postMessage() 将变量发送到嵌入在我的页面上的 iFrame。

父页面是:“https://www.bestcars.com(示例) iFrame 页面是:“https://info.bestcars.com(示例)

加载父页面时,我在 GTM 中触发了以下代码:

(function(window) {
     var checkIframe = setInterval(function() {
         var iframe = document.querySelector('.p-form-content'); 
         var urlobject = "Hello";
         iframe.contentWindow.postMessage(urlobject, 'https://info.bestcars.com');
         clearInterval(checkIframe);
      }, 100); 
})(window);

但是,这行不通。控制台显示错误消息:

VM1359:1 无法在“DOMWindow”上执行“postMessage”:提供的目标源(“https://info.bestcars.com”)与收件人窗口的源(“https://www.bestcars.com”)不匹配').

奇怪的是:当我通过 Chrome 中的控制台在同一页面上执行相同的代码时,它会起作用。

你能帮忙吗?

谢谢,

javascript iframe postmessage
1个回答
0
投票

也许您需要等待 iframe 中的文档加载完毕?这是一个 iframe 文档如下所示的示例:

<!DOCTYPE html>
<html>
  <head>
    <script>
      window.addEventListener('message', e => {
        document.body.innerHTML += `<div>${e.data}</div>`;
      });
    </script>
  </head>
  <body>
    <p>test</p>
  </body>
</html>

document.querySelector('iframe').addEventListener('load', e => {
  setInterval(function(){
    e.target.contentWindow.postMessage('hello', '*');
  }, 1000);
});
<iframe src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHNjcmlwdD4KICAgICAgd2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ21lc3NhZ2UnLCBlID0+IHsKICAgICAgICBkb2N1bWVudC5ib2R5LmlubmVySFRNTCArPSBgPGRpdj4ke2UuZGF0YX08L2Rpdj5gOwogICAgICB9KTsKICAgIDwvc2NyaXB0PgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxwPnRlc3Q8L3A+CiAgPC9ib2R5Pgo8L2h0bWw+"></iframe>

© www.soinside.com 2019 - 2024. All rights reserved.