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 中的这三种基本运算符，并通过实例帮助读…...
UE5 学习系列（二）用户操作界面及介绍
这篇博客是 UE5 学习系列博客的第二篇，在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下： 【Note】：如果你已经完成安装等操作，可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作，重…...
)
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
: K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？)
云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？
大家好，欢迎来到《云原生核心技术》系列的第七篇！ 在上一篇，我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在，我们就像一个拥有了一块崭新数字土地的农场主，是时…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
golang循环变量捕获问题
在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景 看这个代码片段： fo…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
Cinnamon修改面板小工具图标
Cinnamon开始菜单-CSDN博客 设置模块都是做好的，比GNOME简单得多！ 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
优选算法第十二讲：队列 + 宽搜 优先级队列
优选算法第十二讲：队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...