iframe传值之Postmessage

缘由：

最近遇到一个神奇的问题，淘宝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>

子页面给父页面传值</