参考: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, '*');//这里再把值传给父
});