Failed to execute ‘postMessage‘ on ‘DOMWindow‘:

莫尔道嘎老范

已于 2023-11-01 13:15:42 修改

阅读量3.7w

点赞数 4

分类专栏： debug

于 2021-10-28 11:09:58 首次发布

本文链接：https://blog.csdn.net/weixin_44134588/article/details/121009952

版权

跨域 iframe postMessage 数据传输延迟执行

关键词由CSDN通过智能技术生成

debug 专栏收录该内容

19 篇文章

订阅专栏

当需要在两个跨域页面间传递大量数据时，由于URL长度限制，无法通过URL拼接实现。本文介绍了使用postMessage方法的解决方案。遇到的问题是尝试在iframe未加载完成时发送消息导致的错误。解决方案包括提前设置iframe的src属性或者使用setTimeout延迟发送。最终选择了提前设置src的方法，确保iframe加载后再进行通信。文章还提供了一个终极跨域页面跳转传参方案的链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
要做的是两个跨域页面传输传大量的数据,由于url有长度限制,所以拼接的方式行不通,后来查到可以用postmessage来做:

<iframe
      id="myIframe"
      style="display: none"
      :src="ifSrc"
      frameborder="0"
    ></iframe>

在页面中添加一个iframe标签并隐藏,这里src为为另一个项目的地址;
我最开始想的是,src不能写死,后期肯定会变的,所以就用变量,
后俩就遇到了问题
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘http://192.168.2.28:83’) does not match the recipient window’s origin (‘http://127.0.0.1:8082’).

这个问题的原因是,我使用postMessage时候,iframe页面还未创建,
我的写法为:

 ifSrc: "", // iframe  地址
-----------------------------------------------------------
 var myIframe = document.querySelector("#myIframe");
          if (myIframe) {
            that.ifSrc='http://192.168.2.28:83/CreateScenario'
            var data = { value, id: that.scenarioId, name };
              myIframe.contentWindow.postMessage(
                JSON.stringify(data),
                `${ that.ifSrc}`
              );

解决方案有两种,
其一为,提前赋予iframe src具体值,使页面创建
其二为,给代码加一个延时

 		    setTimeout(() => {
              myIframe.contentWindow.postMessage(
                JSON.stringify(data),
                `${ that.ifSrc}`
              );
            }, 500);

我的选择是,方法一, 提前赋予src,

  ifSrc: "http://192.168.2.28:83/CreateScenario", // iframe  地址
---------------------------------------------------------
  if (myIframe) {
            var data = { value, id: that.scenarioId, name };
            setTimeout(() => {
              myIframe.contentWindow.postMessage(
                JSON.stringify(data),
                `${ that.ifSrc}`
              );
            }, 500);
            window.open(`${ that.ifSrc}`);
          }