我面临着一个奇怪的情况。我编写了一段代码,该代码应该通过 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 中的控制台在同一页面上执行相同的代码时,它会起作用。
你能帮忙吗?
谢谢,
也许您需要等待 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>