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>相关文章：
vue 本地自测iframe通讯
使用 postMessage API 来实现跨窗口（跨域）的消息传递。postMessage 允许你安全地发送消息到其他窗口，包括嵌套的 iframe，而不需要担心同源策略的问题。 发送消息（父应用） 1. 父应用：发送消息给…...
C++：单例模式
创建自己的对象，同时确保对象的唯一性。 单例类只能有一个实例☞静态成员static☞静态成员 必须类外初始化 单例类必须自己创建自己的唯一实例 单例类必须给所有其他对象提供这一实例 静态成员类内部可以访问 构造函数私有化☞构造函数私有外部不能创建&#x…...
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…...
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 …...
在交叉编译中,常见的ELF(elf)到底是什么意思？
ELF 是 Executable and Linkable Format 的缩写，中文翻译为“可执行与可链接格式”。它是一种通用的文件格式，主要用于存储可执行文件、目标文件（编译后的中间文件）、动态库（.so 文件）以及内存转储文件&…...
Unity开发AR之Vuforia-MultiTarget笔记
前言 在增强现实（AR）技术蓬勃发展的今天，越来越多的开发者开始探索如何将AR应用于各种场景中。Vuforia作为一个领先的AR开发平台，为开发者提供了强大的工具和功能，使得创建AR体验变得更加简单和直观。本文将为您介绍Vuforia的基本概念、特点，以及如何配置和使用MultiTar…...
深入解析 Oracle 的聚合函数 ROLLUP
目录 深入解析 Oracle 的聚合函数 ROLLUP一、ROLLUP 函数概述二、ROLLUP 函数语法三、ROLLUP 实例详解（一）基础分组聚合（二）引入 ROLLUP 函数（三）ROLLUP 与 NULL 值（四）多列复杂分组…...
Wend看源码-Java-集合学习(List)
摘要 本篇文章深入探讨了基于JDK 21版本的Java.util包中提供的多样化集合类型。在Java中集合共分类为三种数据结构：List、Set和Queue。本文将详细阐述这些数据类型的各自实现，并按照线程安全性进行分类，分别介绍非线程安全与线程安全的实现方…...
【软件】教务系统成绩提交工具使用步骤
【软件】教务系统成绩提交工具使用步骤 零、快速开始 安装 与大多数软件一样，安装步骤很简单，一直点击“下一步”即可快速完成安装，安装完成后，在桌面会有一个软件图标，双击即可打开软件主界面。 导入成绩到Excel中…...
IPsec协议，网络安全的秘密
IPsec概述 IPsec是一组基于网络层的安全协议，是保护IP数据包在网络传输过程中保持安全、隐秘以及真实。通过对IP数据包进行一些加密、认证，来防止数据在传输过程中被窃取、篡改甚至伪造，IPsec在企业内部网络的通信、远程办公、云服务连接等场…...
浅谈下Spring MVC的执行流程
什么是Spring MVC Spring MVC是一个基于Java的Web框架，用于构建Web应用程序。 它是Spring Framework的一部分，它提供了模型-视图-控制器（MVC）架构。 支持RESTful风格的URL请求，易于与其他视图技术集成，如…...
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…...
GitLab 服务变更提醒：中国大陆、澳门和香港用户停止提供服务（GitLab 服务停止）
目录 前言 一. 变更详情 1. 停止服务区域 2. 邮件通知 3. 新的服务提供商 4. 关键日期 5. 行动建议 二. 迁移指南 三. 注意事项 四. 相关推荐 前言 近期，许多位于中国大陆、澳门和香港的 GitLab 用户收到了一封来自 GitLab 官方的重要通知。根据这封邮件…...
主成分分析是线性降维方法
主成分分析是线性降维方法 主成分分析（PCA）是一种常用的线性降维方法。它通过线性变换将原始数据映射到新的坐标系中，使得数据在新坐标系中的第一个坐标（第一个主成分）具有最大的方差，以此类推，…...
Webpack在Vue CLI中的应用
webpack 作为目前最流行的项目打包工具，被广泛使用于项目的构建和开发过程中，其实说它是打包工具有点大材小用了，我个人认为它是一个集前端自动化、模块化、组件化于一体的可拓展系统，你可以根据自己的需要来进行一系列的配置和安…...
继承超详细介绍
一 、继承 1 继承的概念 继承是面向对象程序设计使得代码可以复用的最重要手段，它使得我们可以在原有类的特性的基础上进行扩展，增加方法和属性（成员函数与成员变量），这样产生新的类，叫作派生类。继承呈现了…...
wordpress调用指定ID分类下浏览最多的内容
要在WordPress中调用指定ID分类下浏览最多的内容，你可以通过以下方法实现： <?php $post_num 8; // 设置调用条数 $wdpidproduct 2; // 假设这是你要查询的分类ID $args array(post_password > ,post_status > publish, // wodepress.comca…...
18.springcloud_openfeign之扩展组件二
文章目录 一、前言二、子容器默认组件FeignClientsConfigurationDecoder的注入Contract约定 对注解的支持对类上注解的支持对方法上注解的支持对参数上注解的支持MatrixVariablePathVariableRequestParamRequestHeaderSpringQueryMapRequestPartCookieValue FormattingConversi…...
FreePBX修改IP地址和端口以及添加SSL证书开启HTTPS访问
最近给单位部署了freepbx网络电话系统，我的系统是安装在ibm x3650 m4物理机上的，iso镜像下载后直接用Rufus烧录到U盘，服务器上先做好了raid1，插上U盘重启服务器开撸。安装过程略过了，在虚拟机上安装就不用那么麻烦。 …...
运算符 - 算术、关系、逻辑运算符
引言 在编程中，运算符是用于执行特定操作的符号。C 提供了多种类型的运算符，包括算术运算符、关系运算符和逻辑运算符等。理解这些运算符及其用法对于编写高效且无误的代码至关重要。本文将详细介绍 C 中的这三种基本运算符，并通过实例帮助读…...
Nano Banana进阶指南：从动漫角色到真人手办场景的AI创意融合
1. Nano Banana创意工作流全解析 第一次接触Nano Banana时，我就被它强大的图像生成能力震撼了。但真正让我着迷的，是它能够将动漫角色、真人cosplay和手办场景这三个看似独立的元素完美融合的能力。这种"三位一体"的创作方式，不仅打…...
免费窗口调整工具：3分钟学会强制修改任意窗口大小
免费窗口调整工具：3分钟学会强制修改任意窗口大小 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer 还在为那些无法拖拽、尺寸固定的应用程序窗口而烦恼吗？Wi…...
当 Go 还在追求极简时，C++ 26 却又加了四大“史诗级”新特性
大家好，我是Tony Bai。在这个 Go、Zig 等“小而美”新语言颇受青睐的时代，如果你去技术社区里问一句：“C 这门语言怎么样？”你大概率会得到一堆充满戏谑的回答：“太复杂了，别学”、“从入门到放弃”、“面试…...
intv_ai_mk11保姆级教学：输入‘你好’→追问第2点→指定表格输出，完整交互链路演示
intv_ai_mk11保姆级教学：输入你好→追问第2点→指定表格输出，完整交互链路演示 1. 快速了解intv_ai_mk11 intv_ai_mk11是一款基于Llama架构的AI对话助手，拥有7B参数规模，运行在GPU服务器上。它能帮助你完成各种任务，…...
Python 3.14 JIT编译器性能调优，深度解析_pyltopt.c中6处可调优位点与GCC/Clang后端适配策略
第一章：Python 3.14 JIT编译器性能调优概览Python 3.14 引入了实验性内置 JIT（Just-In-Time）编译器，基于 LLVM 后端实现，旨在对热点函数进行动态编译优化，显著提升数值计算、循环密集型及递归场景的执行效率…...
python基于Hadoop的就业推荐系统的设计与实现 Spark+Hadoop+Hive 大数据 深度学习 机器学习
前言随着就业市场信息不对称问题日益突出，开发高效的智能就业推荐系统 成为当务之急。本研究基于Hadoop生态系统，设计并实现了一套面向求职者和招聘企业的智能推荐系统。系统采用分布式架构，后端基于Django框架实现业务逻辑处理，前…...
Pixel Couplet Gen实战案例：某AI开发者大会现场扫码生成像素春联纪念品
Pixel Couplet Gen实战案例：某AI开发者大会现场扫码生成像素春联纪念品 1. 项目背景与创意来源 1.1 传统与创新的碰撞 在2024年某AI开发者大会现场，我们推出了一款名为"Pixel Couplet Gen"的互动装置。这款产品将中国传统春节文化与现代AI技…...
AI爱好者成长手册：从“会用”到“用好”主流大模型的进阶之路
许多AI爱好者在使用大模型一段时间后会陷入一个困惑：为什么别人能用AI写出惊艳的文案、完成复杂的分析，而自己却总是得到平庸的结果？答案往往不在于模型的选择，而在于使用方式。经过在RskAi（www.rsk.cn） 平…...
高频电路布线十大实用技巧与EMC解决方案
1. 高频电路布线的基本概念与挑战高频电路通常指工作频率达到或超过45MHz~50MHz的数字逻辑电路，当这类电路占整个电子系统1/3以上比重时，就必须考虑高频特性带来的设计挑战。我在实际项目中多次遇到这样的场景：一个原本在低频下工作良好的电路…...
告别计算瓶颈：手把手教你用PyTorch实现ECCV 2024的FFCM图像去雨模块
突破计算效率边界：PyTorch实战ECCV 2024 FFCM图像去雨核心模块 雨滴干扰是计算机视觉领域长期存在的挑战，传统基于空间域的方法往往需要消耗大量计算资源。ECCV 2024提出的FFCM（Fused Fourier Convolution Mixer）模块通过巧妙融合…...