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

vue3、原生html交互传值

news 来源：原创 2025/8/21 14:25:53
1、引入原生html

将该文件放到public目录下，在vue项目里面使用iframe 引入该文件，监听load事件(load事件在<iframe>的内容完全加载完成之后触发)

  <iframe@load="onIframeLoad"style="width: 454px; height: 480px"src="../../../public/Sample/test.html"frameborder="0"></iframe>
2、html文件操作完成后，通过postMessage向.vue文件传递信息
//html文件的保存事件
function submitEvent()
{close();//id的值，根据自己需要获取window.parent.postMessage({ action: 'close', id: '01234564789'}, '*');
}
3、在vue文件里面，文件加载完成后，添加对‘message’事件的监听,监听完成后，进行相应的操作
const onIframeLoad = () => {window.addEventListener("message", handleMessage);
};
const handleMessage = (event) => {if (event.data.action == "close") {console.log(event.data.id)}
};
4、移除事件监听器 
onUnmounted(() => {// 组件销毁前移除事件监听器window.removeEventListener("message", handleMessage);
});

相关文章：

vue3、原生html交互传值

1、引入原生html 将该文件放到public目录下&#xff0c;在vue项目里面使用iframe 引入该文件&#xff0c;监听load事件(load事件在<iframe>的内容完全加载完成之后触发) <iframeload"onIframeLoad"style"width: 454px; height: 480px"src".…...

编程日记 2025/8/21 14:25:53

于 Jupyter 天地，借 NumPy 之手编织数据锦缎

引言 NumPy是Python科学计算的核心库之一&#xff0c;提供了强大的多维数组对象和丰富的数学函数&#xff0c;是数据科学、机器学习等领域不可或缺的工具。结合Jupyter Notebook的交互式环境&#xff0c;NumPy的使用变得更加直观和高效。本文将介绍如何在Jupyter中充分利用NumP…...

编程日记 2025/8/17 1:30:04

Mac idea WordExcel等文件git modify 一直提示修改状态

CRLF LF CR 换行符自动转换问题 查看状态&#xff1a;git config --global --list Mac需要开启&#xff0c;window下需要关闭 关闭命令&#xff1a;git config --global core.autocrlf false 命令解释&#xff1a; autocrlf true 表示要求git在提交时将crlf转换为lf&a…...

编程日记 2025/8/20 7:30:45

代码学习总结（三）

代码学习总结（三） 这个系列的博客是记录下自己学习代码的历程，有来自平台上的，有来自笔试题回忆的，主要基于 C++ 语言，包括题目内容，代码实现，思路，并会注明题目难度，保证代码运行结果 1 判断并构造 eleme 型字符串 简单 eleme 型字符串 判断与构造 小红有一个长…...

编程日记 2025/8/20 4:10:36

Vue的Diff算法原理

Vue中的Diff算法&#xff08;差异算法&#xff09;是虚拟DOM的核心优化手段&#xff0c;用于对比新旧虚拟DOM树&#xff0c;找出最小变更&#xff0c;高效更新真实DOM&#xff0c;其设计目标是减少DOM操作次数&#xff0c;提升渲染性能 diff算法&#xff1a; 特点&#xff1a…...

编程日记 2025/8/19 23:10:50

CentOS系统-超详细的Kubernetes集群搭建教程(kubernetes:1.28.2)

小伙伴们&#xff0c;今天给大家带来一份超详细的Kubernetes集群搭建教程&#xff0c;保证让你从环境准备到安装验证&#xff0c;一路畅通无阻&#xff01;&#x1f680; &#x1f308; ‌一、环境准备‌ 首先&#xff0c;咱们得确保硬件和软件环境都达标哦&#xff01; &am…...

编程日记 2025/8/17 10:25:00

自动驾驶系列—GLane3D: Detecting Lanes with Graph of 3D Keypoints

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…...

编程日记 2025/8/19 12:25:19

【Amazon 工具】在MacOS本地安装 AWS CLI、kubectl、eksctl工具

文章目录 安装 AWS CLI安装 kubectl安装 eksctl参考链接 安装 AWS CLI 创建访问密钥安装或更新 AWS CLI curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg" sudo installer -pkg AWSCLIV2.pkg -target /要验证 Shell 是否可以在 $PAT…...

编程日记 2025/8/17 18:25:59

基于GTID的主从复制

MySQL主从复制实战指南&#xff08;基于二进制日志&#xff09;-CSDN博客 二、基于GTID的主从复制 基于 GTID 方式&#xff1a;全局事务标示符&#xff0c;自mysql5.6版本开启的新型复制方式。 GTID的组成&#xff1a;server_uuid&#xff1a;序列号 UUID&#xff1a;每个m…...

编程日记 2025/8/21 14:23:08

linux多线(进)程编程——（8）多进程的冲突问题

前言 随着时间的推移&#xff0c;共享内存已经在修真界已经沦为禁术。因为使用这种方式沟通的两人往往会陷入到走火入魔的状态&#xff0c;思维扭曲。进程君父子见到这种情况&#xff0c;连忙开始专研起来&#xff0c;终于它们发现了共享内存存在的问题&#xff1a; 进程间冲…...

编程日记 2025/8/21 12:19:36

数据结构——八大排序算法

排序在生活中应用很多&#xff0c;对数据排序有按成绩&#xff0c;商品价格&#xff0c;评论数量等标准来排序。 数据结构中有八大排序&#xff0c;插入、选择、快速、归并四类排序。 目录 插入排序 直接插入排序 希尔排序 选择排序 堆排序 冒泡排序 快速排序 hoare…...

编程日记 2025/8/19 17:42:05

线性代数 | 知识点整理 Ref 1

注&#xff1a;本文为 “线性代数 | 知识点整理” 相关文章合辑。 因 csdn 篇幅合并超限分篇连载&#xff0c;本篇为 Ref 1。 略作重排&#xff0c;未整理去重。 图片清晰度限于引文原状。 如有内容异常&#xff0c;请看原文。 线性代数知识汇总 Arrow 于 2016-11-27 16:27:5…...

编程日记 2025/8/17 18:21:37

Docker 设置镜像源后仍无法拉取镜像问题排查

#记录工作 Windows系统 在使用 Docker 的过程中&#xff0c;许多用户会碰到设置了国内镜像源后&#xff0c;依旧无法拉取镜像的情况。接下来&#xff0c;记录了操作要点以及问题排查方法&#xff0c;帮助我们顺利解决这类问题。 Microsoft Windows [Version 10.0.27823.1000…...

编程日记 2025/8/20 21:46:39

线性回归 (Linear Regression) 多项式回归 (Polynomial Regression)

目录 线性回归 (Linear Regression)单变量线性回归 (Univariate linear regression)代价函数 (Cost function)梯度下降 (gradient descent) 及公式由来梯度下降的变体Quiz多类特征 (Multiple features)多元线性回归 (Multiple linear regression)向量化 (Vectorization)正规方程…...

编程日记 2025/8/20 21:29:42

AI在能源消耗管理及能源效率提升中的核心应用场景及技术实现

以下是 AI在能源消耗管理及能源效率提升中的核心应用场景及技术实现&#xff0c;分领域详细说明&#xff1a; 1. 实时能源监测与异常检测 AI技术应用&#xff1a; 物联网&#xff08;IoT&#xff09; 传感器数据采集&#xff1a;实时收集设备、建筑或工厂的能耗数据&#xff…...

编程日记 2025/8/17 12:30:22

dumpsys--音频服务状态信息

Audio相关的信息获取指令&#xff1a; dumpsys media.audio_flinger dumpsys media.audio_policy dumpsys audio media.audio_flinger dumpsys media.audio_flinger 用于获取 AudioFlinger 服务的详细状态信息。 1. 命令作用 该命令输出当前系统的 音频设备状态、活跃音频流…...

编程日记 2025/8/17 20:26:46

JavaScript模块化开发：CommonJS、AMD到ES模块

引言 在Web开发的早期阶段&#xff0c;JavaScript代码通常被编写在一个庞大的文件中或分散在多个脚本标签里&#xff0c;这种方式导致了全局变量污染、依赖关系难以管理、代码复用困难等问题。随着Web应用日益复杂&#xff0c;模块化编程成为了解决这些问题的关键。本文将带您…...

编程日记 2025/8/21 10:46:12

面试情景题：企业内部系统如何做微前端拆分，如何通信？

在前端开发领域&#xff0c;技术的演进总是伴随着业务需求的复杂化与规模化而不断向前推进。近年来&#xff0c;微前端&#xff08;Micro Frontends&#xff09;作为一种全新的架构理念&#xff0c;逐渐成为解决大型前端应用复杂性的重要手段。与传统的单体前端应用不同&#x…...

编程日记 2025/8/20 19:42:27

OpenHarmony Camera开发指导（五）：相机预览功能（ArkTS）

预览是在相机启动后实时显示场景画面&#xff0c;通常在拍照和录像前执行。 开发步骤 创建预览Surface 如果想在屏幕上显示预览画面&#xff0c;一般由XComponent组件为预览流提供Surface&#xff08;通过XComponent的getXcomponentSurfaceId方法获取surfaceid&#xff09;&…...

编程日记 2025/8/17 20:56:02

鸿蒙API15 “一多开发”适配：解锁黄金三角法则，开启高效开发新旅程

一、引言 在万物互联的时代浪潮中&#xff0c;鸿蒙操作系统以其独特的 “一多开发” 理念&#xff0c;为开发者打开了一扇通往全场景应用开发的新大门。“一多开发”&#xff0c;即一次开发&#xff0c;多端部署 &#xff0c;旨在让开发者通过一套代码工程&#xff0c;就能高效…...

编程日记 2025/8/20 20:47:47

RAG（检索增强生成）、ReAct（推理与行动） 和 多模态AI 的详细解析，包括三者的定义、工作原理、应用场景及协同关系

以下是 RAG&#xff08;检索增强生成&#xff09;、ReAct&#xff08;推理与行动&#xff09; 和 多模态AI 的详细解析&#xff0c;包括三者的定义、工作原理、应用场景及协同关系&#xff1a; 一、RAG&#xff08;Retrieval-Augmented Generation&#xff09; 1. 核心原理 …...

编程日记 2025/8/19 7:32:41

网络安全知识点2

1.虚拟专用网VPN&#xff1a;VPN用户在此虚拟网络中传输私网流量&#xff0c;在不改变网络现状的情况下实现安全&#xff0c;可靠的连接 2.VPN技术的基本原理是利用隧道技术&#xff0c;对传输报文进行封装&#xff0c;利用VPN骨干网建立专用数据传输通道&#xff0c;实现报文…...

编程日记 2025/8/19 11:49:57

DS-SLAM 运动一致性检测的源码解读

运动一致性检测是Frame.cc的Frame::ProcessMovingObject(const cv::Mat &imgray)函数。 对应DS-SLAM流程图Moving consistency check的部分 把这个函数单独摘出来&#xff0c;写了一下对两帧检测&#xff0c;查看效果的程序&#xff1a; #include <opencv2/opencv.hpp…...

编程日记 2025/8/21 2:34:14

VSTO幻灯片退出播放（C#模拟键盘鼠标的事件）

今天遇到了个问题&#xff0c;幻灯片放映到某一页时需要退出播放&#xff0c;没有找到对应的方法&#xff0c;所以想到了直接通过ESC键可以退出&#xff0c;所以模拟执行了一下ESC键&#xff0c;发现真的可以。在此记录一下。 C# 模拟键盘鼠标的事件整理 1、模拟键盘2、模拟鼠标…...

编程日记 2025/8/21 14:20:22

Echarts柱状图斜线环纹（图形的贴花图案）

单独设置 <!--此示例下载自 https://echarts.apache.org/examples/zh/editor.html?cbar-stack&codePYBwLglsB2AEC8sDeAoWszGAG0iAXMmuhgE4QDmFApqYQOQCGAHhAM70A0x6L7ACsAjQwtQqhIkwATxDUGbABaMAJsADu9HrAC-xHd3TZqNaCvEHiFcuaKTjAMzAMAzAFIu28hUXPY9ABYPQxIAI2AwTABbV…...

编程日记 2025/8/21 14:25:53

前端页面效果收集

文章目录 数字雨元素融化动画电子签名共享屏幕 数字雨 <canvas id"matrix"></canvas> <script>const canvas document.getElementById(matrix);const ctx canvas.getContext(2d);canvas.width window.innerWidth;canvas.height window.innerH…...

编程日记 2025/8/21 14:23:07

ASP.NET Core Web API 配置系统集成

文章目录 前言一、配置源与默认设置二、使用步骤1&#xff09;创建项目并添加配置2&#xff09;配置文件3&#xff09;强类型配置类4&#xff09;配置Program.cs5&#xff09;控制器中使用配置6&#xff09;配置优先级测试7&#xff09;动态重载配置测试8&#xff09;运行结果示…...

编程日记 2025/8/17 18:22:29

【hadoop】基于hive的B站用户行为大数据分析

1.需求分析 b站现在积累有用户数据和视频列表数据&#xff0c;为了配合市场部门做好用户运营工作&#xff0c;需要对b站的用户行为进行分析&#xff0c;其具体需求如下所示&#xff1a; 统计b站视频不同评分等级&#xff08;行转列&#xff09;的视频数。 统计上传b站视频最多的…...

编程日记 2025/8/17 18:21:46

如何搭建符号执行环境并跑通第一个测试样例

0.如题 我使用的是verilator和klee进行符号执行的学习&#xff0c;目前还处于起步阶段&#xff0c;起步阶段除了要了解符号执行的定义和作用之外就是环境的搭建了&#xff0c;没想到搭建环境这一步就浪费了很多时间&#xff0c;主要问题出在按照官方的步骤进行搭建的时候&…...

编程日记 2025/8/21 1:05:35

基于 Django 进行 Python 开发

基于 Django 进行 Python 开发涉及多个方面的知识点，以下为你详细介绍： 1. Django 基础 项目与应用创建 借助django-admin startproject project_name来创建新的 Django 项目。利用python manage.py startapp app_name创建新的应用。项目结构 理解项目各文件和目录的作用，像…...

编程日记 2025/8/16 23:58:26

【含文档+PPT+源码】基于微信小程序的非遗文化黄梅戏宣传平台的设计与实现

课程目标&#xff1a; 教你从零开始部署运行项目&#xff0c;学习环境搭建、项目导入及部署&#xff0c;含项目源码、文档、数据库、软件等资料 课程简介&#xff1a; 本课程演示的是一款基于微信小程序的非遗文化黄梅戏宣传平台的设计与实现&#xff0c;主要针对计算机相关…...

编程日记 2025/8/20 14:10:46

使用DDR4控制器实现多通道数据读写(八)

一、 本章概括 在之前的章节已经详细介绍了DDR4的AXI协议&#xff0c;并实现了对DDR4简单的读写操作。这一章节来建立单通道的256位数据的读写&#xff0c;并放出工程框架&#xff0c;说明整体设计思路。 二、 工程框架 三、 设计思路 DDR内存通常用于大容量数据存储&#xf…...

编程日记 2025/8/19 14:54:24

Oracle 处理“不允许长度为0的列”（ORA-01723）问题解析

错误原因‌ 当使用 CREATE TABLE ... AS SELECT 或创建物化视图时&#xff0c;若查询结果中的某列值为空字符串&#xff08;&#xff09;或隐式 NULL 且未显式指定数据类型&#xff0c;Oracle 无法推断该列的长度和类型&#xff0c;从而抛出 ‌ORA-01723: zero-length columns…...

编程日记 2025/8/19 10:57:02

燕山大学计算机网络之Java实现TCP数据包结构设计与收发

觉得博主写的好&#xff0c;给博主点点免费的关注吧&#xff01; 目录 摘要.................................................................................................................... 4 前言.............................................................…...

编程日记 2025/8/17 18:27:44

Linux操作系统学习之---进程状态

目录 明确进程的概念: Linux下的进程状态: 虚拟终端的概念: 见一见现象: 用途之一 : 结合指令来监控进程的状态: 和进程强相关的系统调用函数接口: getpid()和getppid(): fork(): fork函数创建子进程的分流逻辑: 进程之间具有独立性: 进程中存在的写时拷贝: 见一见进程状态…...

编程日记 2025/8/16 19:34:55

Oracle 12.1.0.2补丁安装全流程

第一步&#xff0c;先进行备份 tar -cvf u01.tar /u01 第二步&#xff0c;更新OPatch工具包 根据补丁包中readme信息汇总提示的信息&#xff0c;下载对应版本的OPatch工具包&#xff0c;本次下载的版本为&#xff1a; p6880880_122010_Linux-x86-64.zip opatch版本为最新的…...

编程日记 2025/8/20 10:55:52

第19章：基于efficientNet实现的视频内容识别系统

目录 1.efficientNet 网络 2. 猫和老鼠 3. QT推理 4. 项目 1.efficientNet 网络 本章做了一个视频内容识别的系统 本文选用的模型是efficientNet b0版本 EfficientNet 是 Google 团队在 2019 年提出的一系列高效卷积神经网络模型&#xff0c;其核心思想是通过复合缩放&…...

编程日记 2025/8/20 10:08:41

【Java面试系列】Spring Cloud微服务架构中的分布式事务解决方案与Seata框架实现原理详解 - 3-5年Java开发必备知识

【Java面试系列】Spring Cloud微服务架构中的分布式事务解决方案与Seata框架实现原理详解 - 3-5年Java开发必备知识 引言 在微服务架构中&#xff0c;分布式事务是一个不可避免的挑战。随着业务复杂度的提升&#xff0c;如何保证跨服务的数据一致性成为了面试中的高频问题。本…...

编程日记 2025/8/17 18:27:25

div（HTML标准元素）和view（微信小程序专用组件）的主要区别体

div&#xff08;HTML标准元素&#xff09;和view&#xff08;微信小程序专用组件&#xff09;的主要区别体现在以下方面&#xff1a; 一、应用场景与开发框架 ‌适用平台不同‌ div是HTML/CSS开发中通用的块级元素&#xff0c;用于Web页面布局‌&#xff1b;view是微信小程序专…...

编程日记 2025/8/17 18:22:09

AI在多Agent协同领域的核心概念、技术方法、应用场景及挑战 的详细解析

以下是 AI在多Agent协同领域的核心概念、技术方法、应用场景及挑战 的详细解析&#xff1a; 1. 多Agent协同的定义与核心目标 多Agent系统&#xff08;MAS, Multi-Agent System&#xff09;&#xff1a; 由多个独立或协作的智能体&#xff08;Agent&#xff09;组成&#xff…...

编程日记 2025/8/20 2:21:32

03_Americanas精益管理项目_StarRocks

文章目录 03_StarRocks（一）StarRocks简介1、什么是StarRocks【理解】1）概述2）适用场景2、系统架构【理解】1）系统架构图2）数据管理3、使用【熟悉】（二）表设计4、StarRocks表设计【理解】1）列式存储2）索引3）加速处理5、数据模型【掌握】5-1 明细模型1）适用场景2）创…...

编程日记 2025/8/19 13:23:04

CSS进度条带斑马纹动画(有效果图)

效果图 .wxml <view class"tb"><view class"tb-line" style"transform:translateX({{w%}})" /> </view> <button bind:tap"updateLine">增加进度</button>.js Page({data: {w:0,},updateLine(){this.…...

编程日记 2025/8/19 17:51:28

C++ static的使用方法及不同作用

在 C 里&#xff0c;static 是一个用途广泛的关键字&#xff0c;在不同场景下有不同含义&#xff0c;下面为你详细介绍&#xff1a; 1. 全局变量前的 static 当 static 用在全局变量前时&#xff0c;它会改变变量的链接属性。 默认全局变量&#xff1a;默认的全局变量具有外…...

编程日记 2025/8/20 7:29:48

CSS 美化页面（四）

一、浮动float属性 ‌属性值‌‌描述‌‌适用场景‌left元素向左浮动&#xff0c;腾出右侧空间供其他元素使用&#xff0c;其他内容会围绕在其右侧‌。横向排列元素&#xff08;如导航菜单&#xff09;、图文混排布局‌。right元素向右浮动&#xff0c;腾出左侧空间供其他元素使…...

编程日记 2025/8/17 20:47:45

驱动-原子操作

前面 对并发与竞争进行了实验&#xff0c; 两个 app 应用程序之间对共享资源的竞争访问引起了数据传输错误&#xff0c; 而在 Linux 内核中&#xff0c; 提供了四种处理并发与竞争的常见方法&#xff1a; 分别是原子操作、 自旋锁、 信号量、 互斥体&#xff0c; 这里了解下原子…...

编程日记 2025/8/20 5:03:34

Flutter ListView 详解

ListView 是 Flutter 中用于构建滚动列表的核心组件&#xff0c;支持垂直、水平滚动以及复杂的动态布局。本文将深入解析其核心用法、性能优化策略和高级功能实现&#xff0c;助你打造流畅高效的列表界面。 一、基础篇&#xff1a;快速构建各类列表 1. 垂直列表&#xff08;默…...

编程日记 2025/8/17 19:54:46

关于视频的一些算法内容，不包含代码等

视频算法&#xff1a; 视频降噪&#xff0c; 去除视频中的噪音&#xff0c;提高图像质量 工作原理&#xff1a; 时域降噪&#xff1a;利用相邻帧之间的相似性&#xff0c;通过平均或滤波来减少随机噪声。 空域降噪&#xff1a;在单帧内使用滤波器&#xff08;高斯滤波器&am…...

编程日记 2025/8/21 8:16:32

OpenCV 图形API（43）颜色空间转换-----将 BGR 图像转换为 LUV 色彩空间函数BGR2LUV()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 将图像从BGR色彩空间转换为LUV色彩空间。 该函数将输入图像从BGR色彩空间转换为LUV。B、G和R通道值的传统范围是0到255。 输出图像必须是8位无符…...

编程日记 2025/8/17 18:27:13

keil报错 ..\..\Libraries\CMSIS\stm32f10x.h(298): error: #67: expected a “}“

报错原因&#xff1a; 通常是由于启动文件、头文件定义或驱动选择不一致导致的。以下是一些具体的解决方案&#xff0c;可以帮助你解决这个问题&#xff1a; 检查步骤&#xff1a; 1. 检查启动文件 确保你的启动文件与你的芯片型号相匹配。例如&#xff0c;如果你的芯片是S…...

编程日记 2025/8/21 8:08:45

图像预处理-添加水印

一.ROI切割 类似裁剪图片&#xff0c;但是原理是基于Numpy数组的切片操作(ROI数组切片是会修改原图数据的)&#xff0c;也就是说这个“裁剪”不是为了保存“裁剪”部分&#xff0c;而是为了方便修改等处理。 import cv2 as cv import numpy as npimg cv.imread(../images/dem…...

编程日记 2025/8/19 11:39:13