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

vue 本地自测iframe通讯

news 2025/9/19 3:40:01

使用 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 来实现跨窗口（跨域）的消息传递。postMessage 允许你安全地发送消息到其他窗口，包括嵌套的 iframe，而不需要担心同源策略的问题。发送消息（父应用） 1. 父应用：发送消息给…...

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

C++：单例模式

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

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

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

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

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

调用方法 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 的缩写，中文翻译为“可执行与可链接格式”。它是一种通用的文件格式，主要用于存储可执行文件、目标文件（编译后的中间文件）、动态库（.so 文件）以及内存转储文件&…...

编程日记 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 实例详解（一）基础分组聚合（二）引入 ROLLUP 函数（三）ROLLUP 与 NULL 值（四）多列复杂分组…...

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

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

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

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

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

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

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

IPsec协议，网络安全的秘密

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

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

浅谈下Spring MVC的执行流程

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

编程日记 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镜像（具备demon无人机所需各种驱动） 二、开始刷机（安装ubuntu22.04系统）2.1 进入刷机状态2.2 刷机三、docker…...

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

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

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

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

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

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

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

Webpack在Vue CLI中的应用

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

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

继承超详细介绍

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

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

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

要在WordPress中调用指定ID分类下浏览最多的内容，你可以通过以下方法实现： <?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网络电话系统，我的系统是安装在ibm x3650 m4物理机上的，iso镜像下载后直接用Rufus烧录到U盘，服务器上先做好了raid1，插上U盘重启服务器开撸。安装过程略过了，在虚拟机上安装就不用那么麻烦。 …...

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

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

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

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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑：陈萍萍的公主一点人工一点智能未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/9/19 0:14:07

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...

编程新知 2025/7/30 14:13:39

工程地质软件市场：发展现状、趋势与策略建议

一、引言在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/9/9 8:26:07

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

升级Dledger高可用集群一、主从架构的不足与Dledger的定位主从架构缺陷数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求&#xff…...

编程新知 2025/9/2 3:37:40

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景在现代生产与生活场景中，如工厂高危作业区、医院手术室、公共场景等，人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式，存在效率低、覆盖面不足、判断主观性强等问题，难以满足对人员打手机行为精…...

编程新知 2025/9/18 5:24:43

加密通信 + 行为分析：运营商行业安全防御体系重构

在数字经济蓬勃发展的时代，运营商作为信息通信网络的核心枢纽，承载着海量用户数据与关键业务传输，其安全防御体系的可靠性直接关乎国家安全、社会稳定与企业发展。随着网络攻击手段的不断升级，传统安全防护体系逐渐暴露出局限性&a…...

编程新知 2025/9/9 18:03:51

react更新页面数据，操作页面，双向数据绑定

// 路由不是组件的直接跳转use client，useEffect，useRouter，需3个结合， use client表示客户端 use client; import { Button,Card, Space,Tag,Table,message,Input } from antd; import { useEffect,useState } from react; impor…...

编程新知 2025/9/7 8:42:05