最近的專案：公司水環境資訊平臺，頁面佈局是，分四部分，左中右下四塊。其中地圖（子）頁面是通過iframe嵌入到駕駛艙（父）頁面。 那麼需求來了：

Q1：父頁面需要向子頁面觸發事件：當另外三個板塊關閉之後，全屏顯示地圖後，需要地圖頁面顯示工具欄div，因此需要跨域觸發事件。 *********************************** A1：解決方案： 1，父頁面獲取當前iframe物件 ： var myFrame = document.getElementByIdx_x("map")； 其中： 2，通過事件觸發傳送請求到子頁面： myFrame.contentWindow.postMessage("message", "*"); 這裡不包含任何資訊，只是事件。 3，子頁面監聽事件： window.addEventListener('message', function(){ do（***）；; -------------------------------------分割線------------------------------------------------------ Q2：子頁面需要向父頁面出發事件和引數： 當點選地圖查詢時，需要將查詢到的行政區顯示給父頁面。 ********************** A2：解決方案： 1，子頁面內部觸發父頁面事件先賦值再呼叫方法 var parentData = {type: 'passDataBack', data: ptName}; window.parent.postMessage(parentData, '*'); 2，父頁面監聽事件及引數： window.addEventListener('message',function(event){do（***）； 轉：

http://blog.sina.com.cn/s/blog_9e42ae520102ynly.html

---

示例：

iframe頁面向父頁面傳值——postMessage用法

最近在做系統的遷移，需要將老的系統作為iframe嵌入到新系統中，其中某些資訊需要通過iframe的頁面傳到父頁面中，呼叫contentWindow，因為新系統和老的系統域名不一樣，會報跨域問題，最後選擇了postMessage這種方法。

用法：
iframe的頁面中：

window.parent.postMessage(你要傳遞的值,傳遞到那個域名);
如:
window.parent.postMessage('變數a','http://xxx.com');
 

我是使用的vue，所以在create中監聽

created(){
            window.addEventListener("message",(event)=>{
                    console.log('event',event)
                }
            }, false) ;
        },

從event就能取到你需要的值啦～