淺談postMessage多頁面監聽事件

最近作了一個Echarts和Highcharts多圖多頁面連動的效果，就用到postMessage

以下介紹：

 

最開始在最外圍的頁面也就是全部頁面的父級頁面添加postMessage監聽事件以便監聽下面子級頁面的動態，代碼：

window.parent.addEventListener('message',function(e){

　　　　　　if(e.source != window.parent) return;

　　　　　　var names = localStorage.getItem("toName");

　　　　　　window.postMessage(names,'*');    //*表明全部頁面

},false)

 

以後在在開始的頁面寫入傳入message指令，代碼：

var objString = JSON.stringify({from:"toOne",value:data.name});   //這裏就是多頁面監聽的重點，每次頁面向父級頁面傳入message的時候都是用json格式傳入，以後就能經過判斷from的來源來判斷是點擊了那幅圖要實現什麼效果

var clickName = localStorage.setItem("toName",dataName);    //本地保存一個點擊對象的名稱

window.parent.postMessage(data.name,'*');   //將數據的名稱上傳到父級

 

最後在不一樣頁面的調用，代碼：

window.parent.addEventListener('message',function(e){

　　　　var Title,from;

　　　　try{

　　　　　　var obj = JSON.parse(e.data);    //轉換json字符

　　　　　　Title = obj.value;

　　　　　　from = obj.from;

　　　　}catch(er){

　　　　　　　Title = e.data;　

　　　　}

　　　　if(from=="toOne"){

　　　　　　//用if判斷是哪一個頁面傳入的變量，對應的執行什麼代碼　　

　　　　}else{

　　　　　　//不知足上面的條件又執行什麼

　　　　}

}