iframe與宿主頁面的通信問題

1. 利用 sessionStorage 進行相對安全的通信（localStorage）

保存數據語法：

sessionStorage.setItem("key", "value");

讀取數據語法：

var lastname = sessionStorage.getItem("key");

刪除指定鍵的數據語法：

sessionStorage.removeItem("key");

刪除所有數據：

sessionStorage.clear();

2. postMessage

子向父通信

// iframe 頁面 發消息
window.parent.postMessage({
         msg:"xxx"
},'*');
// 父頁面 收消息
window.addEventListener('message',function(res){
        console.log(res.data.msg);
});

父向子通信

// 父頁面 發消息
var myframe = document.getElementById('myframe'); //獲取iframe
myframe.contentWindow.postMessage({data:'parent'},childDomain); //childDomain是子頁面的源（協議+主機+端口號）
// iframe 頁面 收消息
window.addEventListener('message', function(e){
      console.log(e.data.data);
})

參考鏈接：

• 使用postMessage來實現父子通信跨域
• 跨域通信–Window.postMessage()
• 跨域解決方案之HTML5 postMessage
  3. 利用 iframe 初始化 url 傳參通信傳通信token，以後端服務器爲中繼的 http通信交互
• 繁瑣沒必要使用該方案，除非要求父子頁面高度鑑權