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 中的这三种基本运算符，并通过实例帮助读…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
)
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学（Elliptic Curve Cryptography）是基于椭圆曲线数学理论的公钥密码系统，由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA，ECC在相同安全强度下密钥更短（256位ECC ≈ 3072位RSA…...
YSYX学习记录（八）
C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版 图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的：a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
Linux中《基础IO》详细介绍
目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改，实现简单cat命令 输出信息到显示器，你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...
VisualXML全新升级 | 新增数据库编辑功能
VisualXML是一个功能强大的网络总线设计工具，专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑（如DBC、LDF、ARXML、HEX等），并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...
ubuntu22.04 安装docker 和docker-compose
首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...
前端开发者常用网站
Can I use网站：一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use：Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站：MDN JavaScript权威网站：JavaScript | MDN...