頁面監聽-iframe子父頁面信息傳遞與監聽

之前遇到一個集成別人系統內容的情況，就是彈出框內展示的是別的系統的一個模塊，那個模塊里面點擊保存的時候需要關閉彈出框，這個就牽扯到了頁面中的iframe子父頁面信息傳遞。這幾天又遇到了這個問題，我就寫一下這個博客記錄一下，下一次在遇到好找！！！

思路如下：首先可以通過頁面監聽的方式，子頁面發送消息，而父頁面監聽當前標簽頁內的消息內容。這樣就可以拿到或者說監聽到子頁面發送的消息。具體代碼如下：

window.parent.postMessage({
    param:"121121",
    msg:"success"
},"*");
//父頁面監聽：
window.addEventListener("message", function(event){
    var data = event.data;
    //data.param == "121121" 、data.msg == "success";
})

這個postMessage里面的對象不是固定的數據格式，可以是msg、也可以是code等等，父頁面獲取的方式跟子頁面設定的key保持一致就可以取到對應的值；反之，父頁面同樣可以發送，子頁面去監聽，如下所示：

//父頁面發送：
$("#mapIframe")[0].contentWindow.postMessage({
    module: "yxtz",
    param: "sl_btn_sw"
},"*");
//子頁面監聽：
window.addEventListener("message", function(event) {
    var data = event.data;
    //以下內容為處理業務和調用當前頁面的函數方法
    if(data.module == "yxtz"){
        changeMapShowInfo(data.param);
    }
});

注意一點，子父頁面發送的方式不太一樣。一個是parent、一個是需要明確哪個iframe並指向contentWindow；至此，頁面中的監聽方式的子父頁面消息傳遞就完成了，同時補充一點：父頁面調用子頁面中的帶參函數，代碼如下：

//子頁面js（子頁面的函數不包含在$(function(){})中的方式）：
var testIframe = function(param) {
    alert(param);
}
//父頁面調用：
//frame1對應iframe的id
document.getElementById("frame1").contentWindow.testIframe("121212");

OK，記錄完成！各位大神如果有更好的方式可留言/評論告知一下。謝謝！