当前位置: 首页 > news >正文

一个vue项目中通过iframe嵌套另外一个vue项目,如何让这两个项目进行通信

文章目录

    • 需求
    • 分析
      • 父传子
      • 子传父

需求

一个vue项目中通过iframe嵌套另外一个vue项目,如何让这两个项目之间进行通信

分析

在Vue项目中通过iframe嵌套另外一个Vue项目时,可以通过postMessage方法实现这两个项目之间的通信。postMessage是HTML5新增加的API,它允许在不同的window或iframe之间发送消息。

父传子

  • A项目中父组件中调用B项目并发送 msg
<template><iframe id="modle_iframe" ref="Iframe" :src="url" frameborder="0" />
</template>
<script>
export default {name: 'Index',data () {return {viewer: null,url: '',projectId: this.$store.state.project.projectId,structId: this.$store.state.struct.structId,token: getToken()}},mounted () {const iframe = document.getElementById('modle_iframe')const port = process.env.NODE_ENV === 'development' ? 9002 : 41003const baseUrl = `${window.location.protocol}//${window.location.hostname}:${port}/#/home`this.url = `${baseUrl}?projectId=${this.projectId}&structId=${this.structId}&token=${this.token}&sign=9`const obj = {sign: 'safeDaba',value: '9'}const msg = JSON.stringify(obj)iframe.contentWindow.postMessage(msg, '*')// this.$nextTick(() => {//     this.init()//   })},methods: {}
}
</script>
<style scoped>
#modle_iframe {width: 100%;height: 600px;
}
</style>
  • B项目中子组件中接收B项目发送的 msg
window.addEventListener('message', function (e) {e.stopPropagation();//防止异常try {let data = JSON.parse(e.data); //转化为jsonif (data.sign === 'waterAndRain') {if (data.value === '1') {}} else {}} catch (err) {}});

如果上述代码看不太明白,那么

下面是一个示例代码,演示了如何在父窗口和子窗口之间使用postMessage方法进行通信:

在父窗口中:

// 获取iframe元素
const iframe = document.querySelector('#myIframe')// 监听message事件
window.addEventListener('message', (event) => {// 判断消息来源是否为iframe的地址if (event.source === iframe.contentWindow) {// 处理接收到的消息console.log('收到来自子窗口的消息:', event.data)}
})// 发送消息给iframe
iframe.contentWindow.postMessage('Hello from parent', '*')

在子窗口中:

// 监听message事件
window.addEventListener('message', (event) => {// 判断消息来源是否为父窗口的地址if (event.source === window.parent) {// 处理接收到的消息console.log('收到来自父窗口的消息:', event.data)// 发送消息给父窗口window.parent.postMessage('Hello from child', '*')}
})

在上述代码中,我们首先获取了用于嵌套另一个Vue项目的iframe元素。然后,在父窗口中监听了message事件,当接收到来自iframe的消息时,就会将消息打印输出到控制台中。

接着,在父窗口中使用postMessage方法向iframe发送了一条消息。

在子窗口中,我们也监听了message事件,并判断消息来源是否为父窗口的地址。当接收到来自父窗口的消息时,就会将消息打印输出到控制台中,并使用postMessage方法向父窗口发送了一条消息。

需要注意的是,当使用postMessage方法发送消息时,第二个参数指定的是消息的目标窗口的origin,这里我们使用通配符*表示允许发送消息到任何域名,但在实际应用中建议设置具体的域名。

子传父

首先,在被调用者子组件中,使用postMessage方法将消息传递给父窗口:

  • 子页面
// 在被调用者子组件中
// 向父窗口发送消息
window.parent.postMessage('Hello from child', '*')

然后,在调用者父组件中,通过监听message事件接收子组件传递的消息:

mounted() {window.addEventListener('message', this.handleMessage)},methods: {handleMessage(event) {// 处理接收到的消息console.log('收到来自子组件的消息:', event.data)},}

// 在调用者父组件中
// 监听message事件
window.addEventListener('message', (event) => {// 判断消息来源是否为被调用者子组件的地址if (event.source === document.querySelector('iframe').contentWindow) {// 处理接收到的消息console.log('收到来自子组件的消息:', event.data)}
})

在上述代码中,被调用者子组件通过window.parent.postMessage方法将消息发送给父窗口。注意,这里的window.parent表示父窗口的全局对象。

在调用者父组件中,我们使用window.addEventListener方法监听message事件,并通过判断消息来源是否为被调用者子组件的地址来确定是否处理该消息。

通过这种方式,被调用者子组件可以将消息传递给调用者父组件,实现跨域通信。

需要注意的是,由于涉及到跨域通信,需要确保两个项目的域名不同,否则会受到浏览器的同源策略限制。同时,也需要确保被嵌套的项目正确设置了允许跨域访问的响应头。

相关文章:

一个vue项目中通过iframe嵌套另外一个vue项目,如何让这两个项目进行通信

文章目录 需求分析父传子子传父 需求 一个vue项目中通过iframe嵌套另外一个vue项目&#xff0c;如何让这两个项目之间进行通信 分析 在Vue项目中通过iframe嵌套另外一个Vue项目时&#xff0c;可以通过postMessage方法实现这两个项目之间的通信。postMessage是HTML5新增加的API…...

上班族学习方法系列文章目录

上班族学习方法系列文章目录 文章目录 上班族学习方法系列文章目录前言一、时间管理二、答题实战 前言 上班族如果想提高自己&#xff0c;那么就得掌握有效的学习方法和良好的时间管理。 一、时间管理 上班族有家有业&#xff0c;考证或者提高学历备考时间不充分。需要学会精…...

《Lua程序设计》-- 学习9

迭代器和泛型for 迭代器和闭包 迭代器&#xff08;iterator&#xff09;是一种可以让我们遍历一个集合中所有元素的代码结构。在Lua语言中&#xff0c;通常使用函数表示迭代器&#xff1a;每一次调用函数时&#xff0c;函数会返回集合中的“下一个”元素。 一个闭包就是一个…...

GIS应用水平考试一级—2009 年度第二次

全国信息化工程师——GIS应用水平考试 2009 年度第二次全国统一考试一级 试卷说明: 1、本试卷共9页,6个大题,满分150 分,150 分钟完卷。 2、考试方式为闭卷考试。 3、将第一、二、三題的答案用铅笔涂写到(NCIE-GIS)答题卡上。 4、将第四、五、六题的答案填写到主观题答题卡上…...

【计算机视觉】万字长文详解:卷积神经网络

以下部分文字资料整合于网络&#xff0c;本文仅供自己学习用&#xff01; 一、计算机视觉概述 如果输入层和隐藏层和之前一样都是采用全连接网络&#xff0c;参数过多会导致过拟合问题&#xff0c;其次这么多的参数存储下来对计算机的内存要求也是很高的 解决这一问题&#x…...

Vue3项目封装一个Element-plus Pagination分页

前言:后台系统分页肯定是离不开的,但是ui框架都很多,我们可以定义封装一种格式,所有项目按到这个结构来做. 实例: 第一步:在项目components组件新建一个分页组件,用来进行封装组件. 第二步:根据官方的进行定义,官方提供的这些,需要我们封装成动态模式 第三步:代码改造 <!-…...

node.js(nest.js控制器)学习笔记

nest.js控制器&#xff1a; 控制器负责处理传入请求并向客户端返回响应。 为了创建基本控制器&#xff0c;我们使用类和装饰器。装饰器将类与所需的元数据相关联&#xff0c;并使 Nest 能够创建路由映射&#xff08;将请求绑定到相应的控制器&#xff09;。 1.获取get请求传参…...

Mybatis 源码系列:领略设计模式在 Mybatis 其中的应用

文章目录 一、Builder模式二、工厂模式三、单例模式四、代理模式五、组合模式六、模板方式模式七、适配器模式八、装饰器模式九、迭代器模式 虽然我们都知道有23种设计模式&#xff0c;但是大多停留在概念层面&#xff0c;真实开发中很少遇到&#xff0c;Mybatis源码中使用了大…...

用的到的linux-文件移动-Day2

前言&#xff1a; 在上一节&#xff0c;我们复习了cd大法和创建生成文件和文件夹的方法&#xff0c;介绍了一些“偷懒”&#xff08;高效&#xff09;的小技巧&#xff0c;本节&#xff0c;我们一起来探讨下&#xff0c;我们对文件移动操作时有哪些可以偷懒的小技巧~ 一、复制…...

红队打靶练习:INFOSEC PREP: OSCP

目录 信息收集 1、arp 2、nmap WEB 信息收集 wpscan dirsearch ssh登录 提权 信息收集 1、arp ┌──(root㉿ru)-[~/kali] └─# arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:69:c7:bf, IPv4: 192.168.110.128 Starting arp-scan 1.10.0 with 256 ho…...

【linux】文件修改记录

是的&#xff0c;在Linux上&#xff0c;您可以使用’ find 命令检查最近修改的文件。此实用程序可以搜索在指定天数内修改过的文件。你可以这样使用它: 查找主目录中最近24小时(1天)内修改过的文件。 find ~ -type f -mtime -1命令说明: -“~”表示您的主目录。 ’ -type f…...

Vue学习Element-ui

声明&#xff1a;本文来源于黑马程序员PDF讲义 Ajax 我们前端页面中的数据&#xff0c;如下图所示的表格中的学生信息&#xff0c;应该来自于后台&#xff0c;那么我们的后台和前端是 互不影响的2个程序&#xff0c;那么我们前端应该如何从后台获取数据呢&#xff1f;因为是2…...

存内计算技术—解决冯·诺依曼瓶颈的AI算力引擎

文章目录 存内计算技术背景CSDN首个存内计算开发者社区硅基光电子技术存内计算提升AI算力知存科技存算一体芯片技术基于存内计算的语音芯片的实现挑战 参考文献 存内计算技术背景 存内计算技术是一种革新性的计算架构&#xff0c;旨在克服传统冯诺依曼架构的瓶颈&#xff0c;并…...

数据结构--树

一、树的基本术语 结点:树中的一个独立单元 结点的度:结点下分支的个数 树的度:树中所有结点中度的最大值 非终端结点:度不为0的结点 双亲和孩子:结点下的子树称为该结点的孩子.相应地,该结点称为孩子的双亲 兄弟:同一个双亲的孩子之间 祖先:从根到该结点所经分支上的所…...

计算机网络_1.3电路交换、分组交换和报文交换

1.3电路交换、分组交换和报文交换 一、电路交换1、“电路交换”例子引入2、电路交换的三个阶段3、计算机之间的数据传送不适合采用电路交换 二、分组交换1、发送方&#xff08;1&#xff09;报文&#xff08;2&#xff09;分组&#xff08;3&#xff09;首部 2、交换节点3、接收…...

【AI视野·今日NLP 自然语言处理论文速览 第七十七期】Mon, 15 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Mon, 15 Jan 2024 Totally 57 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Machine Translation Models are Zero-Shot Detectors of Translation Direction Authors Michelle Wastl, Ja…...

神经网络的一些常规概念

epoch&#xff1a;是指所有样本数据在神经网络训练一次&#xff08;单次epoch(全部训练样本/batchsize)/iteration1&#xff09;或者&#xff08;1个epochiteration数 batchsize数&#xff09; batch-size&#xff1a;顾名思义就是批次大小&#xff0c;也就是一次训练选取的样…...

【从零开始的rust web开发之路 三】orm框架sea-orm入门使用教程

【从零开始的rust web开发之路 三】orm框架sea-orm入门使用教程 文章目录 前言一、引入依赖二、创建数据库连接简单链接连接选项开启日志调试 三、生成实体安装sea-orm-cli创建数据库表使用sea-orm-cli命令生成实体文件代码 四、增删改查实现新增数据主键查找条件查找查找用户名…...

SQL中limit的用法

在SQL中&#xff0c;LIMIT是一个用于限制返回结果行数的关键词。它可用于在查询结果中指定返回的行数&#xff0c;从而可以用于分页查询或限制结果集大小。 LIMIT关键词有两种常用的语法格式&#xff1a; LIMIT offset, count&#xff1a;该语法用于指定返回结果的起始位置和…...

vue3 [Vue warn]: Unhandled error during execution of scheduler flush

文章目录 前言一、报错截图二、排除问题思路相关问题 Vue3 优雅解决方法异步组件异同之处&#xff1a;好处&#xff1a;在使用异步组件时&#xff0c;有几个注意点&#xff1a; vue3 定义与使用异步组件 总结 前言 Bug 记录。开发环境运行正常&#xff0c;构建后时不时触发下面…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

【实施指南】Android客户端HTTPS双向认证实施指南

&#x1f510; 一、所需准备材料 证书文件&#xff08;6类核心文件&#xff09; 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...

海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》

近日&#xff0c;嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》&#xff0c;海云安高敏捷信创白盒&#xff08;SCAP&#xff09;成功入选软件供应链安全领域产品名录。 在数字化转型加速的今天&#xff0c;网络安全已成为企业生存与发展的核心基石&#xff0c;为了解…...