通过GTM向iFrame发送postMessage失败，报源不匹配错误

问题背景 #

父页面地址：https://www.bestcars.com
内嵌iFrame目标地址：https://info.bestcars.com

通过GTM触发以下代码尝试向iFrame发送消息：

(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 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://info.bestcars.com') does not match the recipient window's origin ('https://www.bestcars.com').

但在Chrome控制台手动执行相同代码却能正常工作。

原因分析 #

问题核心是GTM触发时机过早：当代码执行时，iFrame的DOM元素虽然已被渲染，但内部页面还未加载完成，此时iFrame的contentWindow.origin仍为父页面的同源地址（初始状态可能是空白页或同源占位内容），导致postMessage指定的目标origin与实际接收窗口origin不匹配，触发报错。而手动在控制台执行时，iFrame已完全加载完毕，origin正确，因此通信正常。

解决方案 #

方案1：轮询时校验iFrame的origin #

修改代码，在轮询中同时检查iFrame元素存在性和origin合法性，确认后再发送消息：

(function(window) {
     var checkIframe = setInterval(function() {
         var iframe = document.querySelector('.p-form-content'); 
         // 校验iFrame存在且origin符合目标地址
         if (iframe && iframe.contentWindow && iframe.contentWindow.origin === 'https://info.bestcars.com') {
             var urlobject = "Hello";
             iframe.contentWindow.postMessage(urlobject, 'https://info.bestcars.com');
             clearInterval(checkIframe);
         }
      }, 100); 
     // 添加超时机制，避免无限轮询
     setTimeout(function() {
         clearInterval(checkIframe);
     }, 10000);
})(window);

方案2：监听iFrame的load事件（更可靠） #

通过监听iFrame的load事件确保页面完全加载，同时搭配轮询作为兜底，避免load事件未触发的情况：

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

     var iframe = document.querySelector('.p-form-content');
     if (iframe) {
         // 若iFrame已加载完成，直接发送消息
         if (iframe.contentWindow && iframe.contentWindow.origin === 'https://info.bestcars.com') {
             sendMessageToIframe();
         } else {
             // 监听load事件
             iframe.addEventListener('load', sendMessageToIframe);
             // 轮询兜底
             var checkInterval = setInterval(function() {
                 if (iframe.contentWindow && iframe.contentWindow.origin === 'https://info.bestcars.com') {
                     sendMessageToIframe();
                     clearInterval(checkInterval);
                     iframe.removeEventListener('load', sendMessageToIframe);
                 }
             }, 100);
             // 超时停止轮询
             setTimeout(function() {
                 clearInterval(checkInterval);
             }, 10000);
         }
     }
})(window);

额外注意事项 #

• 确认iFrame的src属性确实设置为https://info.bestcars.com，避免动态设置src时触发时机早于src更新。
• 不要随意使用*作为postMessage的目标origin，这会带来安全风险，始终指定具体的目标地址。

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