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

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

一，a项目中：

    <div><button id="sendMessage">发送消息</button></div><iframeid="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); //获取本地存储的Keyobj[key]=localStorage.getItem(key)||''}parent.postMessage( obj, '*');//这里再把值传给父});

两个前端项目利用iframe进行通信相关推荐

html网页制作之细谈HTML前端项目开发过程中的细节及心得_避免入坑
细谈两类前端项目与编写过程中的技巧.心得快乐的五一小长假,由于回家路途遥远,只好自己在校编前端网页.两天多的时间编写了两种不同风格的网页,人都敲傻了,还好只涉及到了HTML和CSS,并未加入JS模块 ...
nginx——不同前端项目共用一个端口
文章目录以前的配置项配置文件改进达到效果注意点以前的配置项之前再nginx中,针对前端页面的跳转等,通常会采取类似如下的方式实现: server {listen 8040;server_n ...
利用iframe实现ajax 跨域通信的解决方案
在漫长的前端开发旅途上,无可避免的会接触到ajax,而且一般情况下都是用在同一域下的ajax请求:但是如果请求是发生在不同的域下,请求就无法执行,并且会抛出异常提示不允许跨域请求,目前我没有找到明确的 ...
node.js require 自动执行脚本并生成html,利用node.js实现自动生成前端项目组件的方法详解...
本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 脚本编写背景写这个小脚本的初衷是,项目本身添加一个组件太 ...
java通信项目_Java项目中的多线程通信如何利用Socket实现
Java项目中的多线程通信如何利用Socket实现发布时间:2020-11-24 16:44:40 来源:亿速云阅读:96 作者:Leah 这期内容当中小编将会给大家带来有关Java项目中的多线程 ...
如何利用qiankun快速搭建一个微前端项目
前言小伙伴们大家好.前一篇文章跟大家分享了一些关于微前端的知识点,包括什么是微前端,为什么要用微前端以及如何实现一个微前端,在文章的最后我们还提到了能够实现微前端的两个库:single-spa和qi ...
做了两年前端开发，平时就是拿 Vue 写写页面和组件，简历的项目经历应该怎么写得好看？
无意间在知乎看见的,感觉讲得很有道理.看原文点这里 ------> 做了两年前端开发,平时就是拿 Vue 写写页面和组件,简历的项目经历应该怎么写得好看? 2年经验做的东西没什么技术含量,应 ...
React基础学习笔记（一）-react前端项目的两种搭建方式
1.运行环境准备需要先进行react项目的运行环境nodeJS的安装,具体安装流程可以参考: windows版本的安装配置帮助文档:https://www.cnblogs.com/liuqiyun/ ...
尚硅谷VUE项目-前端项目问题总结07--产品详情页【vuex-排他操作foreach-放大镜-轮播图-兄弟组件通信$bus-购物车-路由跳转传参-路由传参+会话存储】-游客身份-节流
尚硅谷VUE项目-前端项目问题总结07---产品详情页 1.静态组件(详情页还未注册为路由组件) 2.发请求 3.vuex-获取产品详情信息 3.1放大镜 3.2 属性值[排他操作] 3.3轮播图[j ...
Docker利用Nginx部署前端项目
今天给大家分享的是Docker利用Nginx部署Vue等前端页面项目:其实是我工作刚好用到,顺便分享给大家O(∩_∩)O,那么话不多说直接开始. 一:准备文件我们先将前端项目打包好,放到此文件夹下, ...

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

一，a项目中：

二，项目

两个前端项目利用iframe进行通信相关推荐

最新文章

热门文章