vue 本地自测iframe通讯

使用 postMessage  API 来实现跨窗口(跨域)的消息传递。postMessage 允许你安全地发送消息到其他窗口,包括嵌套的 iframe,而不需要担心同源策略的问题。

发送消息(父应用)

1. 父应用:发送消息给子应用

父应用可以通过 postMessage 将消息发送给子应用。需要注意的是,发送消息时,需要指定目标窗口和目标窗口的来源(即目标 iframe 的 origin),以确保安全性。

 iframe.contentWindow.postMessage(message, targetOrigin)

 使用 postMessage 向子应用发送消息。message 是要发送的数据,可以是任何 JavaScript 对象。targetOrigin 是目标窗口的源(例如:http://child-app.com),它确保消息只发送到具有这个源的窗口。

2、接收消息(子应用)

子应用通过监听 message 事件来接收父应用发送的消息。收到消息后,子应用可以根据消息中的 type 字段来执行不同的操作。

示例:父应用与子应用通信

1. 父应用:发送消息给子应用

父应用通过 postMessage 向 iframe 中的子应用发送一个包含 type 的消息。我们还可以通过 targetOrigin 来确保消息只发送到指定的子应用。

<!-- 父应用 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Parent App</title>
</head>
<body><h1>Parent Application</h1><!-- iframe 中嵌套子应用 --><iframe id="childIframe" src="http://child-app.com" width="600" height="400"></iframe><button onclick="sendMessageToChild()">发送消息到子应用</button><script>// 发送消息到子应用function sendMessageToChild() {const iframe = document.getElementById('childIframe');const message = {type: 'CLEAR_INPUT',  // 消息类型data: { message: '请清空输入框' }};// 使用 postMessage 发送消息到子应用iframe.contentWindow.postMessage(message, 'http://child-app.com');  // 子应用的 origin}</script>
</body>
</html>
2. 子应用:接收父应用发送的消息

子应用会监听 message 事件,接收到消息后可以处理它。通常可以根据 message.type 来决定如何处理消息。

<!-- 子应用 (iframe 内容) -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Child App</title>
</head>
<body><h1>Child Application</h1><input type="text" id="inputField" placeholder="请输入内容..."><script>// 监听父应用发送的消息window.addEventListener('message', function(event) {// 验证消息的来源if (event.origin !== 'http://parent-app.com') {return;  // 如果消息来源不正确,则忽略}const message = event.data;console.log('Received message from parent:', message);// 根据消息的 type 执行不同操作if (message.type === 'CLEAR_INPUT') {document.getElementById('inputField').value = '';  // 清空输入框}});</script>
</body>
</html>

如何在vue本地项目进行iframe测试通讯

1、新建一个iframe.vue页面,为父页面

// 父应用
<template><div class="act-form"><iframe :src="src" id="childIframe" width="600" height="400"></iframe><el-button @click="sendMessage">向iframe发送信息</el-button></div>
</template><script>export default {data () {return {src: '',}},created() {// 当前我本地运行的端口为 localhost:8080  需要根据实际情况调动this.src = 'http:localhost:8080/home?id=18' },methods: {sendMessage () {const iframe = document.getElementById('childIframe');const message = {type: 'CLEAR_INPUT',  // 消息类型data: { message: '请清空输入框' }};// 使用 postMessage 发送消息到子应用iframe.contentWindow.postMessage(message, this.src);  // 子应用的origin},},}
}
</script>

2、子应用 

<!-- 子应用 (iframe 内容) -->
<template><div> // 内容区域</div>
</template><script>export default {data () {return {},created() {// 在外部vue的window上添加postMessage的监听,并且绑定处理函数handleMessagewindow.addEventListener('message', this.handleMessage)},methods: {handleMessage (event) {// 根据上面制定的结构来解析iframe内部发回来的数据// 验证消息的来源if (event.origin !== 'http://parent-app.com') {return;  // 如果消息来源不正确,则忽略}const message = event.data;console.log('Received message from parent:', message);// 根据消息的 type 执行不同操作if (message.type === 'CLEAR_INPUT') {// 在这里执行你需要的逻辑}});}}beforeDestroy(){  // 页面关闭移除监听window.removeEventListener("message", this.handleMessage);}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/64185.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux:code:network:devinet_sysctl_forward;IN_DEV_FORWARD

文章目录 简介sysctl 设置使用,arp_process间接使用IN_DEV_RX_REDIRECTSdev_disable_lro简介 最近在看Linux里的forwarding的功能。顺便在这里总结一下。有些详细代码逻辑,如果可以记录一下,会好一点。 sysctl 设置 这个函数在查看的时候需要注意的问题:变量名起的有点简…

自然语言处理与知识图谱的融合与应用

目录 前言1. 知识图谱与自然语言处理的关系1.1 知识图谱的定义与特点1.2 自然语言处理的核心任务1.3 二者的互补性 2. NLP在知识图谱构建中的应用2.1 信息抽取2.1.1 实体识别2.1.2 关系抽取2.1.3 属性抽取 2.2 知识融合2.3 知识推理 3. NLP与知识图谱融合的实际应用3.1 智能问答…

PHP 数组

PHP 数组 PHP 是一种流行的服务器端编程语言&#xff0c;它提供了强大的数组处理能力。PHP 数组是一种数据结构&#xff0c;用于存储相同类型或不同类型的多个值。在 PHP 中&#xff0c;数组可以分为一维数组、二维数组和多维数组。本文将详细介绍 PHP 数组的各种操作&#xf…

CSS(三)盒子模型

目录 Content Padding Border Margin 盒子模型计算方式 使用 box-sizing 属性控制盒子模型的计算 所有的HTML元素都可以看作像下图这样一个矩形盒子&#xff1a; 这个模型包括了四个区域&#xff1a;content&#xff08;内容区域&#xff09;、padding&#xff08;内边距…

基于NodeMCU的物联网窗帘控制系统设计

最终效果 基于NodeMCU的物联网窗帘控制系统设计 项目介绍 该项目是“物联网实验室监测控制系统设计&#xff08;仿智能家居&#xff09;”项目中的“家电控制设计”中的“窗帘控制”子项目&#xff0c;最前者还包括“物联网设计”、“环境监测设计”、“门禁系统设计计”和“小…

有没有免费提取音频的软件?音频编辑软件介绍!

出于工作和生活娱乐等原因&#xff0c;有时候我们需要把音频单独提取出来&#xff08;比如歌曲伴奏、人声清唱等、乐器独奏等&#xff09;。要提取音频必须借助音频处理软件&#xff0c;那么有没有免费提取音频的软件呢&#xff1f;下面我们将为大家介绍几款免费软件&#xff0…

WPF自定义窗口 输入验证不生效

WPF自定义窗口 输入验证不生效 WPF ValidationRule 不生效 WPF ValidationRule 不生效 解决方案&#xff1a;在WindowStyle的Template中添加AdornerDecorator标签。 <Style x:Key"WindowStyle1" TargetType"{x:Type Window}"><Setter Property&…

【保姆式】python调用api通过机器人发送文件到飞书指定群聊

当前飞书webhook机器人还不支持发送文件类型的群消息&#xff0c;它目前仅支持文本&#xff0c;富文本&#xff0c;卡片等文字类型的数据。 我们可以申请创建一个机器人应用来实现群发送文件消息。 创建飞书应用 创建飞书应用、配置权限、添加机器人 来到飞书开发者后台 创建…

MySQL-存储过程(头歌数据库实验题)

&#xff08;学校数据库课程的头歌平台实验题&#xff0c;根据自己理解编写&#xff0c;希望对正在学的人有启发作用和借鉴帮助&#xff0c;不喜勿喷&#xff0c;有错请联系改正&#xff09; 实验 存储过程&#xff1a;输入1 任务描述&#xff1a; 本关任务&#xff1a;编写…

GitLab 服务变更提醒:中国大陆、澳门和香港用户停止提供服务(GitLab 服务停止)

目录 前言 一. 变更详情 1. 停止服务区域 2. 邮件通知 3. 新的服务提供商 4. 关键日期 5. 行动建议 二. 迁移指南 三. 注意事项 四. 相关推荐 前言 近期&#xff0c;许多位于中国大陆、澳门和香港的 GitLab 用户收到了一封来自 GitLab 官方的重要通知。根据这封邮件…

mysql基础快速入门

通用语法及分类 DDL: 数据定义语言&#xff0c;用来定义数据库对象&#xff08;数据库、表、字段&#xff09;DML: 数据操作语言&#xff0c;用来对数据库表中的数据进行增删改DQL: 数据查询语言&#xff0c;用来查询数据库中表的记录DCL: 数据控制语言&#xff0c;用来创建数…

Python文件读写在“简易记事本”项目中的应用

Python文件读写在“简易记事本”项目中的应用 文件读写是“简易记事本”项目实现数据持久化的关键部分。在本节中&#xff0c;我们将逐步拆解记事本的功能&#xff0c;详细讲解与文件读写相关的代码&#xff0c;并结合实际操作帮助读者更好地理解文件操作的核心知识点。 功能…

【Agent】AutoGen Studio2.0开源框架-UI层环境安装+详细操作教程(从0到1带跑通智能体AutoGen Studio)

&#x1f4a5; 欢迎来到我的博客&#xff01;很高兴能在这里与您相遇&#xff01; 首页&#xff1a;GPT-千鑫 – 热爱AI、热爱Python的天选打工人&#xff0c;活到老学到老&#xff01;&#xff01;&#xff01;导航 - 人工智能系列&#xff1a;包含 OpenAI API Key教程, 50个…

三层交换机配置

一&#xff0c;三层交换 概念&#xff1a;三层交换技术就是&#xff1a;二层交换技术三层转发技术(路由器功能)。它解决了局域网中网段划分之后&#xff0c;网段中子网必须依赖路由器进行管理的局面&#xff0c;解决了传统路由器低速&#xff0c;复杂所造成的网络瓶颈问题。 …

js单例模式

单例模式是一种常见的设计模式&#xff0c;在JavaScript中也有广泛应用&#xff0c;以下是关于它的详细介绍&#xff1a; 定义 单例模式是一种创建型设计模式&#xff0c;它确保一个类只有一个实例&#xff0c;并提供一个全局访问点来访问该实例。在JavaScript中&#xff0c;…

【Golang 面试题】每日 3 题(六)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…

SQL Server数据库多主模式解决方案

SQL Server 本身并不直接支持多主模式(Multi-Master Replication),即多个数据库实例可以同时进行写操作,并且这些更改会自动同步到其他实例。不过,SQL Server 提供了多种高可用性和复制解决方案,可以实现类似多主模式的功能。以下是几种常见的方法: 1. Always On 可用性…

连锁餐饮行业数据可视化分析方案

引言 随着连锁餐饮行业的迅速发展&#xff0c;市场竞争日益激烈。企业需要更加精准地把握运营状况、消费者需求和市场趋势&#xff0c;以制定科学合理的决策&#xff0c;提升竞争力和盈利能力。可视化数据分析可以帮助连锁餐饮企业整合多源数据&#xff0c;通过直观、动态的可…

Zookeeper JavaAPI操作(Curator API常用操作)

构建项目 zk版本&#xff1a;3.5.7&#xff0c;引入4.0.0的curator版本&#xff0c;Curator依赖的版本只能比zookeeper依赖的版本高。 Curator简单介绍 Curator是Netflix公司开源的一套zookeeper客户端框架&#xff0c;解决了很多Zookeeper客户端非常底层的细节开发工作&…

可搜索的下拉选择框:filterable属性详解

在前端开发中&#xff0c;下拉选择框&#xff08;Dropdown Select&#xff09;是一个常见的UI组件&#xff0c;它允许用户从一组预定义的选项中选择一个或多个值。然而&#xff0c;当选项数量较多时&#xff0c;手动查找特定的选项可能会变得繁琐。为了解决这个问题&#xff0c…