两个前端项目利用iframe进行通信

参考：https://juejin.cn/post/6844903477018116104

一，a项目中：

	 <div>
      <button id="sendMessage">
        发送消息
      </button>
    </div>
    <iframe
      id="receiver"
      src="http://127.0.0.1:8080/index.html"
      style="display:none"
    >
      <p>你的浏览器不支持 iframe。</p>
    </iframe>

window.onload = function() {
    
    
  let receiver = document.getElementById("receiver").contentWindow;
  let btn = document.getElementById("sendMessage");
  btn.addEventListener("click", function (e) {
    
    
    e.preventDefault();
    receiver.postMessage("Hello ", "*");//这里把值传给iframe中的项目
  });
};
//回调函数
function receiveMessageFromIframePage (event) {
    
    
  console.log("接收到的数据", event.data);//这里接收到iframe中项目传过来的值
}

//监听message事件
window.addEventListener("message", receiveMessageFromIframePage, false);

二，项目

  window.addEventListener('message', function (e) {
    
      // 监听 message 事件，接收父传过来的值
        if (e.origin !== "http://127.0.0.1:8008") {
    
      // 验证消息来源地址
            return;
        }
		let obj={
    
    }
		for (let i = 0; i < localStorage.length; i++) {
    
    
            let key = localStorage.key(i); //获取本地存储的Key
			obj[key]=localStorage.getItem(key)||''
        }
		parent.postMessage( obj, '*');//这里再把值传给父
    });