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

vue 本地自测iframe通讯

news 2026/4/1 13:41:37
使用 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

translategemma-4b-it快速入门：Ollama部署图文翻译模型，开箱即用

translategemma-4b-it快速入门&#xff1a;Ollama部署图文翻译模型&#xff0c;开箱即用 1. 认识translategemma-4b-it 1.1 什么是translategemma-4b-it translategemma-4b-it是Google基于Gemma 3架构开发的开源多模态翻译模型。与普通翻译工具不同&#xff0c;它不仅能处理…...

编程新知 2026/4/1 12:52:26

ESP32开发环境：VS Code与ESP-IDF插件高效配置指南

1. 为什么选择VS Code开发ESP32&#xff1f; 第一次接触ESP32开发时&#xff0c;我尝试过各种开发工具&#xff1a;Arduino IDE、PlatformIO、Eclipse...最后发现VS Code配合ESP-IDF插件才是最佳组合。这个方案不仅免费开源&#xff0c;更重要的是能充分发挥ESP32的全部性能特…...

编程新知 2026/4/1 12:12:09

深入解读XDMA驱动：从/dev节点看透RK3588与FPGA的PCIe数据流（H2C/C2H通道详解）

深入解读XDMA驱动&#xff1a;从/dev节点看透RK3588与FPGA的PCIe数据流&#xff08;H2C/C2H通道详解&#xff09; 当你在RK3588开发板上执行ls /dev/xdma0_*命令时&#xff0c;那些神秘的字符设备节点背后隐藏着一套精密的PCIe通信体系。作为连接ARM SoC与FPGA的高速数据通道&…...

编程新知 2026/4/1 11:59:54

Wan2.2-I2V-A14B开源大模型部署：PyTorch 2.4+CUDA 12.4兼容性验证

Wan2.2-I2V-A14B开源大模型部署&#xff1a;PyTorch 2.4CUDA 12.4兼容性验证 1. 镜像概述与核心价值 Wan2.2-I2V-A14B是一款专注于文本到视频生成的开源大模型&#xff0c;其私有部署镜像经过深度优化&#xff0c;能够充分发挥RTX 4090D显卡的性能优势。这个镜像最大的特点在…...

编程新知 2026/4/1 11:53:49

Linux 调度器中的限流机制：throttled 标志的触发与解除

一、简介在实时系统和云计算环境中&#xff0c;资源隔离与公平分配是 Linux 内核调度的核心挑战。当多个任务共享 CPU 资源时&#xff0c;某些恶意或失控的任务可能耗尽全部 CPU 时间&#xff0c;导致关键任务饥饿&#xff08;Starvation&#xff09;。为此&#xff0c;Linux 内…...

编程新知 2026/4/1 11:27:39

Java EE开发技术 （报错解决 BeanCreationException）

该报错因为使用构造注入时没有提供参数列表或没有提供有参构造而造成的修改静态工厂中的参数列表即可...

编程新知 2026/4/1 10:33:00

HoRain云--Vue3组件开发：从入门到精通的终极指南

&#x1f3ac; HoRain 云小助手&#xff1a;个人主页 ⛺️生活的理想&#xff0c;就是为了理想的生活! ⛳️ 推荐 前些天发现了一个超棒的服务器购买网站&#xff0c;性价比超高&#xff0c;大内存超划算&#xff01;忍不住分享一下给大家。点击跳转到网站。 目录 ⛳️ 推荐 …...

编程新知 2026/4/1 9:50:26

如何用StreamCap实现多平台直播内容的自动捕获与管理

如何用StreamCap实现多平台直播内容的自动捕获与管理 【免费下载链接】StreamCap Multi-Platform Live Stream Automatic Recording Tool | 多平台直播流自动录制客户端 基于FFmpeg 支持监控/定时/转码 项目地址: https://gitcode.com/gh_mirrors/st/StreamCap 在数字…...

编程新知 2026/4/1 9:29:58

高级CMB2技巧：可重复字段组和动态条件显示

高级CMB2技巧&#xff1a;可重复字段组和动态条件显示 【免费下载链接】CMB2 CMB2 is a developers toolkit for building metaboxes, custom fields, and forms for WordPress that will blow your mind. 项目地址: https://gitcode.com/gh_mirrors/cm/CMB2 CMB2是Word…...

编程新知 2026/4/1 8:02:03

WSL2下USB串口设备‘失踪’？手把手教你找回/dev/ttyUSB0（以Quectel模块为例）

WSL2下USB串口设备消失的终极解决方案&#xff1a;从原理到实战 最近在WSL2环境下调试Quectel模块时&#xff0c;发现一个奇怪现象&#xff1a;lsusb明明能识别设备&#xff0c;但/dev/ttyUSB0却神秘失踪。这让我想起去年调试树莓派时遇到的类似问题&#xff0c;但WSL2的环境特…...

编程新知 2026/4/1 7:51:49