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

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

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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/11057.html