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

vue 本地自测iframe通讯

news 2026/2/10 16:44:26
使用 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>

相关文章：

vue 本地自测iframe通讯

使用 postMessage API 来实现跨窗口&#xff08;跨域&#xff09;的消息传递。postMessage 允许你安全地发送消息到其他窗口&#xff0c;包括嵌套的 iframe&#xff0c;而不需要担心同源策略的问题。 发送消息&#xff08;父应用&#xff09; 1. 父应用&#xff1a;发送消息给…...

编程日记 2024/12/29 1:06:43

C++：单例模式

创建自己的对象&#xff0c;同时确保对象的唯一性。 单例类只能有一个实例☞静态成员static☞静态成员 必须类外初始化 单例类必须自己创建自己的唯一实例 单例类必须给所有其他对象提供这一实例 静态成员类内部可以访问 构造函数私有化☞构造函数私有外部不能创建&#x…...

编程日记 2024/12/29 1:04:41

SOME/IP 协议详解——信息格式

文章目录 1. 头部格式1.1 消息 ID&#xff08;Message ID&#xff09;1.2 长度&#xff08;Length&#xff09;1.3 请求 ID&#xff08;Request ID&#xff09;1.4 协议版本&#xff08;Protocol Version&#xff09;&#xff1a;1.5 接口版本&#xff08;Interface Version&am…...

编程日记 2024/12/29 1:03:41

C# GDI+数码管数字控件

调用方法 int zhi 15;private void button1_Click(object sender, EventArgs e){if (zhi > 19){zhi 0;}lcdDisplayControl1.DisplayText zhi.ToString();} 运行效果 控件代码 using System; using System.Collections.Generic; using System.Drawing.Drawing2D; using …...

编程日记 2024/12/29 0:53:30

在交叉编译中,常见的ELF(elf)到底是什么意思？

ELF 是 Executable and Linkable Format 的缩写&#xff0c;中文翻译为“可执行与可链接格式”。它是一种通用的文件格式&#xff0c;主要用于存储可执行文件、目标文件&#xff08;编译后的中间文件&#xff09;、动态库&#xff08;.so 文件&#xff09;以及内存转储文件&…...

编程日记 2024/12/29 0:49:27

Unity开发AR之Vuforia-MultiTarget笔记

前言 在增强现实（AR）技术蓬勃发展的今天，越来越多的开发者开始探索如何将AR应用于各种场景中。Vuforia作为一个领先的AR开发平台，为开发者提供了强大的工具和功能，使得创建AR体验变得更加简单和直观。本文将为您介绍Vuforia的基本概念、特点，以及如何配置和使用MultiTar…...

编程日记 2024/12/29 0:47:25

深入解析 Oracle 的聚合函数 ROLLUP

目录 深入解析 Oracle 的聚合函数 ROLLUP一、ROLLUP 函数概述二、ROLLUP 函数语法三、ROLLUP 实例详解&#xff08;一&#xff09;基础分组聚合&#xff08;二&#xff09;引入 ROLLUP 函数&#xff08;三&#xff09;ROLLUP 与 NULL 值&#xff08;四&#xff09;多列复杂分组…...

编程日记 2024/12/29 0:45:22

Wend看源码-Java-集合学习(List)

摘要 本篇文章深入探讨了基于JDK 21版本的Java.util包中提供的多样化集合类型。在Java中集合共分类为三种数据结构&#xff1a;List、Set和Queue。本文将详细阐述这些数据类型的各自实现&#xff0c;并按照线程安全性进行分类&#xff0c;分别介绍非线程安全与线程安全的实现方…...

编程日记 2024/12/29 0:35:08

【软件】教务系统成绩提交工具使用步骤

【软件】教务系统成绩提交工具使用步骤 零、快速开始 安装 与大多数软件一样&#xff0c;安装步骤很简单&#xff0c;一直点击“下一步”即可快速完成安装&#xff0c;安装完成后&#xff0c;在桌面会有一个软件图标&#xff0c;双击即可打开软件主界面。 导入成绩到Excel中…...

编程日记 2024/12/29 0:30:01

IPsec协议，网络安全的秘密

IPsec概述 IPsec是一组基于网络层的安全协议&#xff0c;是保护IP数据包在网络传输过程中保持安全、隐秘以及真实。通过对IP数据包进行一些加密、认证&#xff0c;来防止数据在传输过程中被窃取、篡改甚至伪造&#xff0c;IPsec在企业内部网络的通信、远程办公、云服务连接等场…...

编程日记 2024/12/29 0:28:57

浅谈下Spring MVC的执行流程

什么是Spring MVC Spring MVC是一个基于Java的Web框架&#xff0c;用于构建Web应用程序。 它是Spring Framework的一部分&#xff0c;它提供了模型-视图-控制器&#xff08;MVC&#xff09;架构。 支持RESTful风格的URL请求&#xff0c;易于与其他视图技术集成&#xff0c;如…...

编程日记 2024/12/29 0:25:51

khadas edge2安装ubuntu22.04与ubuntu20.04 docker镜像

khadas edge2安装ubuntu22.04与ubuntu20.04 docker镜像 一、资源准备1.1 镜像文件1.2 刷机工具1.3 ubuntu20.04 docker镜像&#xff08;具备demon无人机所需各种驱动&#xff09; 二、开始刷机&#xff08;安装ubuntu22.04系统&#xff09;2.1 进入刷机状态2.2 刷机 三、docker…...

编程日记 2024/12/29 0:24:46

GitLab 服务变更提醒：中国大陆、澳门和香港用户停止提供服务（GitLab 服务停止）

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

编程日记 2024/12/29 0:20:41

主成分分析是线性降维方法

主成分分析是线性降维方法 主成分分析&#xff08;PCA&#xff09;是一种常用的线性降维方法。它通过线性变换将原始数据映射到新的坐标系中&#xff0c;使得数据在新坐标系中的第一个坐标&#xff08;第一个主成分&#xff09;具有最大的方差&#xff0c;以此类推&#xff0c…...

编程日记 2024/12/29 0:19:37

Webpack在Vue CLI中的应用

webpack 作为目前最流行的项目打包工具&#xff0c;被广泛使用于项目的构建和开发过程中&#xff0c;其实说它是打包工具有点大材小用了&#xff0c;我个人认为它是一个集前端自动化、模块化、组件化于一体的可拓展系统&#xff0c;你可以根据自己的需要来进行一系列的配置和安…...

编程日记 2024/12/29 0:13:30

继承超详细介绍

一 、继承 1 继承的概念 继承是面向对象程序设计使得代码可以复用的最重要手段&#xff0c;它使得我们可以在原有类的特性的基础上进行扩展&#xff0c;增加方法和属性&#xff08;成员函数与成员变量&#xff09;&#xff0c;这样产生新的类&#xff0c;叫作派生类。继承呈现了…...

编程日记 2024/12/29 0:08:24

wordpress调用指定ID分类下浏览最多的内容

要在WordPress中调用指定ID分类下浏览最多的内容&#xff0c;你可以通过以下方法实现&#xff1a; <?php $post_num 8; // 设置调用条数 $wdpidproduct 2; // 假设这是你要查询的分类ID $args array(post_password > ,post_status > publish, // wodepress.comca…...

编程日记 2024/12/29 0:07:19

18.springcloud_openfeign之扩展组件二

文章目录 一、前言二、子容器默认组件FeignClientsConfigurationDecoder的注入Contract约定 对注解的支持对类上注解的支持对方法上注解的支持对参数上注解的支持MatrixVariablePathVariableRequestParamRequestHeaderSpringQueryMapRequestPartCookieValue FormattingConversi…...

编程日记 2024/12/29 0:06:18

FreePBX修改IP地址和端口以及添加SSL证书开启HTTPS访问

最近给单位部署了freepbx网络电话系统&#xff0c;我的系统是安装在ibm x3650 m4物理机上的&#xff0c;iso镜像下载后直接用Rufus烧录到U盘&#xff0c;服务器上先做好了raid1&#xff0c;插上U盘重启服务器开撸。安装过程略过了&#xff0c;在虚拟机上安装就不用那么麻烦。 …...

编程日记 2024/12/29 0:03:15

运算符 - 算术、关系、逻辑运算符

引言 在编程中&#xff0c;运算符是用于执行特定操作的符号。C 提供了多种类型的运算符&#xff0c;包括算术运算符、关系运算符和逻辑运算符等。理解这些运算符及其用法对于编写高效且无误的代码至关重要。本文将详细介绍 C 中的这三种基本运算符&#xff0c;并通过实例帮助读…...

编程日记 2024/12/28 23:52:03

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

线程同步：确保多线程程序的安全与高效！

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

编程新知 2025/9/24 16:02:40

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

编程新知 2026/2/3 22:50:06

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2026/2/7 11:01:56

[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

编程新知 2026/1/28 8:34:48

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/12/10 6:18:55

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2026/2/4 17:31:44

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2026/2/6 1:00:00

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

编程新知 2025/10/26 5:04:25