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. 父应用：发送消息给…...
【人工智能】基于Python和OpenCV实现实时人脸识别系统：从基础到应用
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！ 解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界 随着人工智能和计算机视觉的快速发展，人脸识别技术已广泛应用于监控、安全、社交媒体、金融和医疗等领域。本文将介绍如何利用Python和Ope…...
vue2使用pdfjs-dist和jsPDF生成pdf文件
vue2使用pdfjs-dist和jsPDF生成pdf文件 1、安装依赖 npm install pdfjs-dist2.6.3472、引入依赖 import { jsPDF } from jspdf// 使用require方式导入pdfjs-dist v2.6.347，高版本报错（import导入会报错：GlobalWorkerOptions undefined&…...
深度学习算法选择
1. 卷积神经网络（Convolutional Neural Networks, CNNs） 简介 卷积神经网络擅长处理具有网格结构的数据，如图像。通过卷积层、池化层和全连接层，CNN能够自动提取和学习数据的空间特征。 应用场景 图像识别与分类：如…...
asp.net core系统记录当前在线人数
实时记录当前在线人数，登录后保持120秒在线状态，在线状态保存在缓存中，采用滑动过期，在120秒内请求了系统，自动续活120秒；超过时间则移除用户在线状态； 需要在登录过滤器标记用户在线状态需要排…...
【每日学点鸿蒙知识】Grid子项拖动、Swiper指示器、手势事件上报、指定使用发布版本API、打包签名失败报错109
1、HarmonyOS Grid组件子项拖动问题？ Grid组件中有20个GridItem子组件，其中前4个GridItem是不能拖动的，其余GridItem可拖动排序。 关于可拖拽grid及gridItem可参考如下代码（注：其中 .draggable(parseInt(day) < 6…...
轻松实现向量搜索：探索 Elastic-Embedding-Searcher 项目
随着人工智能和机器学习技术的飞速发展，向量搜索已成为数据检索的重要方式。尤其是在处理大规模文本数据时，传统的基于关键词的检索方式已经难以满足需求。为了优化检索性能并提升搜索精度，向量搜索成为了更加高效的解决方案。而在这一领域&a…...
区块链平台安全属性解释
区块链平台安全属性解释 双向认证 解释：双向认证是指在通信过程中，**通信双方都需要对对方的身份进行验证，确保对方是合法的、可信任的实体。**只有双方身份都得到确认后，通信才会被允许进行，从而防止非法用户的接入和数据的窃取或篡改。举例：在基于区块链和联邦学习的数…...
matlab reshape permute
1.reshape 将向量按照顺序重新构建 矩阵，新矩阵 先排完第一列， 再第二列… 2.permute 将向量 维度变换...
《一文读懂卷积网络CNN：原理、模型与应用全解析》
《一文读懂卷积网络CNN：原理、模型与应用全解析》 一、CNN 基本原理大揭秘（一）从人类视觉到 CNN 灵感（二）核心组件详解 二、经典 CNN 模型巡礼（一）LeNet-5：开山鼻祖（二&a…...
 函数：以多头注意力机制（Multi-Head Attention）为例 （中英双语）)
深入理解 PyTorch 的 view() 函数：以多头注意力机制（Multi-Head Attention）为例 （中英双语）
深入理解 PyTorch 的 view() 函数：以多头注意力机制（Multi-Head Attention）为例 在深度学习模型的实现中，view() 是 PyTorch 中一个非常常用的张量操作函数，它能够改变张量的形状（shape）而不改…...
【每日学点鸿蒙知识】获取是否有网接口、获取udid报错、本地通知、Json转Map、Window10安装Hyper-v
1、有没有获取当前是否真实有网的接口？ 比如当前链接的是wifi，但是当前wifi是不能访问网络的，有没有接口可以获取到这个真实的网络访问状态？ 请参考说明链接：https://developer.huawei.com/consumer/cn/doc/harmonyo…...
《Vue3 四》Vue 的组件化
组件化：将一个页面拆分成一个个小的功能模块，每个功能模块完成自己部分的独立的功能。任何应用都可以被抽象成一棵组件树。 Vue 中的根组件： Vue.createApp() 中传入对象的本质上就是一个组件，称之为根组件（APP 组件…...
Linux：alias别名永久有效
一、背景 日常使用bash时候，有些常用的命令参数的组合命令太长，很难记，此时可以利用Linux提供的alias命令生成命令的别名（命令的隐射），但是我们会发现，当退出了终端后重新登录就失效了ÿ…...
MicroDiffusion——采用新的掩码方法和改进的 Transformer 架构，实现了低预算的扩散模型
介绍 论文地址：https://arxiv.org/abs/2407.15811 现代图像生成模型擅长创建自然、高质量的内容，每年生成的图像超过十亿幅。然而，从头开始训练这些模型极其昂贵和耗时。文本到图像（T2I）扩散模型降低了部分计算成本&a…...
网神SecFox FastJson反序列化RCE漏洞复现（附脚本）
0x01 产品描述： 网神SecFox是奇安信网神信息技术(北京)股份有限公司推出的一款运维安全管理与审计系统，集“身份认证、账户管理、权限控制、运维审计”于一体，提供统一运维身份认证、细粒度的权限控制、丰富的运维审计报告、多维度的预警…...
解决无法在 Ubuntu 24.04 上运行 AppImage 应用
在 Ubuntu 24.04 中运行 AppImage 应用的完整指南 在 Ubuntu 24.04 中，许多用户可能会遇到 AppImage 应用无法启动的问题。即使你已经设置了正确的文件权限，AppImage 仍然拒绝运行。这通常是由于缺少必要的库文件所致。 问题根源：缺少 FUSE…...
Pytorch | 利用PC-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击
Pytorch | 利用PC-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击 CIFAR数据集PC-I-FGSM介绍算法原理 PC-I-FGSM代码实现PC-I-FGSM算法实现攻击效果 代码汇总pcifgsm.pytrain.pyadvtest.py 之前已经针对CIFAR10训练了多种分类器： Pytorch | 从零构建AlexNet对CIFAR…...
前端往后端传递参数的方式有哪些？
文章目录 1. URL 参数1.1. 查询参数（Query Parameters)1.2. 路径参数（Path Parameters） 2. 请求体（Request Body）2.1. JSON 数据2.2. 表单数据2.3. 文件上传 3. 请求头（Headers）3.1. 自定义请求…...
对抗攻击VA-I-FGSM:Adversarial Examples with Virtual Step and Auxiliary Gradients
文章目录 摘要相关定义算法流程代码：文章链接： Improving Transferability of Adversarial Examples with Virtual Step and Auxiliary Gradients 摘要 深度神经网络已被证明容易受到对抗样本的攻击，这些对抗样本通过向良性样本中添加人类难以察觉的扰动来欺骗神经网络。目…...
【Java】IO流练习
IO流练习 题干： 根据指定要求，完成电话记录、 注册、登录 注册 题干： 完成【注册】功能： 要求： 用户输入用户名、密码存入users.txt文件中 若users.txt文件不存在，创建该文件若users.txt文件存在 输入…...
红魔电竞PadPro平板解BL+ROOT权限-KernelSU+LSPosed框架支持
红魔Padpro设备目前官方未开放解锁BL，也阉割了很多解锁BL指令，造成大家都不能自主玩机。此规则从红魔8开始，就一直延续下来，后续的机型大概率也是一样的情况。好在依旧有开发者进行适配研究，目前红魔PadPro平板&#x…...
小程序配置文件 —— 12 全局配置 - pages配置
全局配置 - pages配置 在根目录下的 app.json 文件中有一个 pages 字段，这里我们介绍一下 pages 字段的具体用法； pages 字段：用来指定小程序由哪些页面组成，用来让小程序知道由哪些页面组成以及页面定义在哪个目录，…...
供应链系统设计-供应链中台系统设计（六）- 商品中心概念篇
概述 我们在供应链系统设计-中台系统设计系列（五）- 供应链中台实践概述 中描述了什么是供应链中台，供应链中台主要包含了那些组成部门。包括业务中台、通用中台等概念。为了后续方便大家对于中台有更深入的理解，我会逐一针对中台…...
leetcode 面试经典 150 题：删除有序数组中的重复项
链接删除有序数组中的重复项题序号26题型数组解题方法双指针难度简单熟练度✅✅✅✅✅ 题目 给你一个 非严格递增排列 的数组 nums ，请你 原地 删除重复出现的元素，使每个元素 只出现一次 ，返回删除后数组的新长度。元素的 相对顺序 应该保…...
Python 中的 lambda 函数和嵌套函数
Python 中的 lambda 函数和嵌套函数 Python 中的 lambda 函数和嵌套函数Python 中的 lambda 函数嵌套函数（内部函数）封装辅助函数闭包和工厂函数 Python 中的 lambda 函数和嵌套函数 Python 中的 lambda 函数 Lambda 函数是基于单行表达式的匿名函数。…...
Android笔试面试题AI答之Android基础（7）
Android入门请看《Android应用开发项目式教程》，视频、源码、答疑，手把手教 文章目录 1.Android开发如何提高App的兼容性？**1. 支持多版本 Android 系统****2. 适配不同屏幕尺寸和分辨率****3. 处理不同硬件配置****4. 适配不同语言和地区**…...
PhPMyadmin-cms漏洞复现
一.通过日志文件拿Shell 打开靶场连接数据库 来到sql中输入 show global variables like %general%; set global general_logon; //⽇志保存状态开启； set global general_log_file D:/phpstudy/phpstudy_pro/WWW/123.php //修改日志保存位置 show global varia…...
HTML-CSS（day01）
W3C标准： W3C（ World Wide Web Consortium，万维网联盟） W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是： 三个组成部分：（1&…...
【服务器项目部署】⭐️将本地项目部署到服务器！
目录 🍸前言 🍻一、服务器选择 🍹 二、服务器环境部署 2.1 java 环境部署 2.2 mysql 环境部署 🍸三、项目部署 3.1 静态页面调整 3.2 服务器端口开放 3.3 项目部署 🍹四、测试 🍸前言 小伙伴们大家好…...
计算机网络 （14）数字传输系统
一、定义与原理 数字传输系统，顾名思义，是一种将连续变化的模拟信号转换为离散的数字信号，并通过适当的传输媒介进行传递的系统。在数字传输系统中，信息被编码成一系列的二进制数字，即0和1，这些数字序列能够…...
机器学习周报-TCN文献阅读
文章目录 摘要Abstract 1 TCN通用架构1.1 序列建模任务描述1.2 因果卷积（Causal Convolutions）1.3 扩张卷积（Dilated Convolutions）1.4 残差连接（Residual Connections） 2 TCN vs RNN3 TCN缺点4 代码4.1 TC…...
UniApp 页面布局基础
一、UniApp 页面布局简介 在当今的移动应用开发领域，跨平台开发已成为一种主流趋势。UniApp作为一款极具影响力的跨平台开发框架，凭借其“一套代码，多端运行”的特性，为开发者们提供了极大的便利，显著提升了开发效率。…...
最新的强大的文生视频模型Pyramid Flow 论文阅读及复现
《PYRAMIDAL FLOW MATCHING FOR EFFICIENT VIDEO GENERATIVE MODELING》 论文地址：2410.05954https://arxiv.org/pdf/2410.05954 项目地址： jy0205/Pyramid-Flow： 用于高效视频生成建模的金字塔流匹配代码https://github.com/jy0205/Pyram…...
论文阅读 - 《Large Language Models Are Zero-Shot Time Series Forecasters》
Abstract 通过将时间序列编码为数字组成的字符串，我们可以将时间序列预测当做文本中下一个 token预测的框架。通过开发这种方法，我们发现像GPT-3和LLaMA-2这样的大语言模型在下游任务上可以有零样本时间序列外推能力上持平或者超过专门设计的时间序列训…...
STM32文件详解
STM32文件详解 启动文件打开MDK栈空间开辟堆空间开辟中断向量表复位程序对于 weak 的理解对于_main 函数的分析中断程序堆栈初始化系统启动流程 时钟树时钟源时钟配置函数时钟初始化配置函数 启动文件 启动文件的方式 1、初始化堆栈指针 SP _initial_sp 2、初始化程序计数器指…...
【Spring】详解（上）
Spring 框架核心原理与应用（上） 一、Spring 框架概述 （一）诞生背景 随着 Java 应用程序规模的不断扩大以及复杂度的日益提升，传统的 Java开发方式在对象管理、代码耦合度等方面面临诸多挑战。例如，对象之…...
大数据面试笔试宝典之Flink面试
1.Flink 是如何支持批流一体的？ F link 通过一个底层引擎同时支持流处理和批处理. 在流处理引擎之上，F link 有以下机制： 1）检查点机制和状态机制：用于实现容错、有状态的处理; 2）水印机制：用于实现事件时钟; 3）窗口和触发器：用于限制计算范围，并定义呈现结果的…...
Rust编程与项目实战-箱
【图书介绍】《Rust编程与项目实战》-CSDN博客 《Rust编程与项目实战》(朱文伟，李建英)【摘要 书评 试读】- 京东图书 (jd.com) Rust编程与项目实战_夏天又到了的博客-CSDN博客 对于Rust而言，箱（crate）是一个独立的可编译单元&…...
git回退指定版本/复制提交id
1.使用“git reset --hard 目标版本号”命令将版本回退2.使用“git push -f”提交更改 因为我们回退后的本地库HEAD指向的版本比远程库的要旧，此时如果用“git push”会报错。 改为使用 git push -f 即可完成回退后的提交。...
数据库锁的深入探讨
数据库锁（Database Lock）是多用户环境中用于保证数据一致性和隔离性的机制。随着数据库系统的发展，特别是在高并发的场景下，锁的机制变得尤为重要。通过使用锁，数据库能够防止并发操作导致的数据冲突或不一致。本文将深…...
《机器学习》——KNN算法
文章目录 KNN算法简介KNN算法——sklearnsklearn是什么？sklearn 安装sklearn 用法 KNN算法 ——距离公式KNN算法——实例分类问题完整代码——分类问题 回归问题完整代码 ——回归问题 KNN算法简介 一、KNN介绍 全称是k-nearest neighbors，通过寻找k个距…...
iOS开发代码块-OC版
iOS开发代码块-OC版 资源分享资源使用详情Xcode自带代码块自定义代码块 资源分享 自提： 通过网盘分享的文件：CodeSnippets 2.zip 链接: https://pan.baidu.com/s/1Yh8q9PbyeNpuYpasG4IiVg?pwddn1i 提取码: dn1i Xcode中的代码片段默认放在下面的目录中…...
关于在M系列的Mac中使用SoftEtherClient软件
1. 前言 本文说明的是在M系列的苹果的MacBook中如何使用SoftetherClient这款软件，是直接在MacOS操作系统中安装连接使用，不是在PD环境或者非ARM架构的Mac中安装使用。 PS：别费劲百度了，很少有相关解决方案的，在国内会…...
【畅购商城】详情页模块之评论
目录 接口 分析 后端实现：JavaBean 后端实现 前端实现 接口 GET http://localhost:10010/web-service/comments/spu/2?current1&size2 { "code": 20000, "message": "查询成功", "data": { "impressions&q…...
机器学习DAY4续：梯度提升与 XGBoost （完）
本文将通过 XGBoost 框架来实现回归、分类和排序任务，帮助理解和掌握使用 XGBoost 解决实际问题的能力。我们将从基本的数据处理开始，逐步深入到模型训练、评估以及预测。最后，将模型进行保存和加载训练好的模型。 知识点 回归任务分类任务…...
Maven 测试和单元测试介绍
一、测试介绍 二、单元测试 1）介绍 2）快速入门 添加依赖 <dependencies><!-- junit依赖 --><dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter</artifactId><version>5.9…...
LeetCode7. 整数反转
难度：中等 给你一个 32 位的有符号整数 x ，返回将 x 中的数字部分反转后的结果。 如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] ，就返回 0。 假设环境不允许存储 64 位整数（有符号或无符号）。 示…...
Java编程题_面向对象和常用API01_B级
Java编程题_面向对象和常用API01_B级 第1题 面向对象、异常、集合、IO 题干: 请编写程序，完成键盘录入学生信息，并计算总分将学生信息与总分一同写入文本文件 需求：键盘录入3个学生信息(姓名,语文成绩,数学成绩) 求出每个学生的总分 ,并…...
WEB攻防-通用漏洞-文件上传-js验证-MIME验证-user.ini-语言特征
目录 定义 1.前端验证 2.MIME验证 3.htaccess文件和.user. ini 4.对内容进行了过滤，做了内容检测 5.[ ]符号过滤 6.内容检测php [] {} ; 7.()也被过滤了 8.反引号也被过滤 9.文件头检测 定义 文件上传漏洞是指攻击者上传了一个可执行文件（如木马…...