緣由：

最近遇到一個神奇的問題，淘寶WindVane不支援多層巢狀，只支援一層巢狀的形式，所以就像使用一層傳值的方式來互動iframe,調研了幾種方案以後，發現還是window.postMessage傳值在iframe最靠譜，但是相對的要改動原來的頁面，所以自己衡量啦~

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;
  }
 

慣例上DEMO