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通信交互
• 繁琐没必要使用该方案，除非要求父子页面高度鉴权

来源：CSDN

作者：AngelovLee

链接：https://blog.csdn.net/ChangerJJLee/article/details/103833413