iframe传值之Postmessage

最新推荐文章于 2025-10-22 11:19:31 发布

原创最新推荐文章于 2025-10-22 11:19:31 发布 · 3.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#iframe传值 #postmessage #跨域传值

iframe 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用window.postMessage在iframe中进行跨域通信，包括父页面向子页面、子页面向父页面传值的方法，并提供了相关的DEMO示例，适用于解决多层嵌套iframe通信问题。

部署运行你感兴趣的模型镜像

缘由：

最近遇到一个神奇的问题，淘宝WindVane不支持多层嵌套，只支持一层嵌套的形式，所以就像使用一层传值的方式来交互iframe,调研了几种方案以后，发现还是window.postMessage传值在iframe最靠谱，但是相对的要改动原来的页面，所以自己衡量啦~

API：

MDN API

传值方式：

父页面给子页面传值方式，写法基本是一致的，收到值监听message事件

父页面传值

示例：


    let url = $("#postMessageText").val();
    iFrame = document.getElementById('iframe-info');
    // 后台页面发送数据
    iFrame.contentWindow.postMessage({
      'resourceURL': "传值"
    }, '*');

<iframe id="iframe-info" src="https://www.taobao.com/"></iframe>

子页面给父页面传值

      // 给父页面发送消息，隐藏按钮
      parent.postMessage({
        sendBack: false,
      }, '*');

接收值（通过”message“进行事件监听）

  //监听message事件
  window.addEventListener("message", this.getPostMessage, false);

    // 用 origin 判断传输网址
    var origin = event.origin || event.originalEvent.origin; 
    if (origin !== "http://example.org:8080") return;
    
    //获取传输的 resourceURL 值
    let data = event.data;
    let resourceURL = data.resourceURL;
  }