浅谈postMessage跨域通信与localStorage实现跨域共享

本文链接：https://blog.youkuaiyun.com/weixin_43475507/article/details/107332340

浅谈postMessage跨域通信与localStorage实现跨域共享
a.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
    <div id="color">Frame Color</div>
</div>
<div>
    <iframe id="child" src="b.html" ></iframe>
</div>

<div onclick="changeColorValue()">click</div>
<script type="text/javascript">
  // 主页面监听message事件,初始化自身颜色
  // 主页面监听message事件,处理自身变色
  window.addEventListener('message', function(e) {
    console.log('listen.....');
    for (var i in e.data){
      var item = e.data[i]
      localStorage.setItem(item.key,item.value)
    }
  }, false);


  function changeColorValue() {
    var params = []
    params.push({key:"token_one",value:'token_value'})
    console.log('start post color ..............');
    for (var i in params){
      var item = params[i]
      localStorage.setItem(item.key,item.value)
    }
    var postObj =  document.getElementById('child')
    postObj.contentWindow.postMessage(params, '*');
  }
</script>
</body>
</html>

b.html

<!doctype html>
<html>
<head>
    <style type="text/css">
        html,body{
            height:100%;
            margin:0px;
        }
    </style>
</head>
<body style="height:100%;">
<div id="container" onclick="changeColor();" style="widht:100%; height:100%; ">
    click to change color
</div>
<script type="text/javascript">
  // 点击iframe时触发changeColor方法，把变化后的颜色发送给主页面
  function changeColor() {
    var params = []
    params.push({key:"token",value:'token'})
    console.log('start post color ..............');
    for (var i in params){
      var item = params[i]
      localStorage.setItem(item.key,item.value)
    }

    window.parent.postMessage(params, '*');
  }

  window.addEventListener('message', function(e) {
    console.log('listen.....-----.....');
    for (var i in e.data){
      var item = e.data[i]
      localStorage.setItem(item.key,item.value)
    }
  }, false);
</script>
</body>
</html>