iframe子頁面與父頁面互相傳遞參數、事件

最近的項目：公司水環境信息平台，頁面布局是，分四部分，左中右下四塊。其中地圖（子）頁面是通過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就能取到你需要的值啦～