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

iframe通过postMessage进行跨域通信以及在Angular中使用

news 2026/4/1 10:05:28

写在前面

在前端开发过程中，会遇到一些需要使用iframe的场景，使用iframe关键的一个点是数据之间的传输，基于同源的要求十分苛刻，大家基本上是都是跨域的，如果跨域进行数据传输呢？
大家使用的比较多的就是postMessage()这个方法了，下面将具体展示如何在html中使用iframe进行数据传输，以及在angular框架中如何使用以及在angular中与html中的差异性

普通html页面

由外到内（向iframe内网页传输数据）

使用iframe处

<body><iframe src="./iframe-content.html" class="iframe" frameborder="0"></iframe><script>const iframeElement = document.querySelector(".iframe");//需要等待iframe加载完成后再发送信息，原因是 iframe的网页需要注册message事件，若先发消息再注册，那么在注册之前是收不到消息的iframeElement.addEventListener("load", () => {//相当于iframe自己给自己发消息iframeElement.contentWindow.postMessage("这是一条信息", "*");});</script></body>

iframe内容

<body><span>这里是iframe内容</span><script>window.addEventListener("message", (event) => {console.log(event.data);});</script>
</body>

由内到外

使用iframe处

  <body><iframe src="./iframe-content.html" class="iframe" frameborder="0"></iframe><script>window.addEventListener("message", (event) => {console.log(event.data);});</script></body>

iframe内容

 <body><span>这里是iframe内容</span><script>//给上层级发消息，若上层级是顶层可以使用window.topwindow.parent.postMessage("给使用处发消息", "*");</script></body>

在Angular使用

  • 首先是src 在angular中直接使用src链接会被认为是不安全的,需要通过DomSanitizer中的bypassSecurityTrustResourceUrl方法进行一个转化才可使用
constructor(private sanitizer: DomSanitizer
) {this.src = this.sanitizer.bypassSecurityTrustResourceUrl(`${path}`);
}
  • 其次是在获取iframe 可以通过 @ViewChild来获取
@ViewChild('iframe') iframeElement:ElementRef<HTMLIFrameElement>; 来进行获取
  • 通过监听iframe load事件来判断接受事件是否注册不能使用了 ，就需要在iframe内部传来一条信息来通知事件是否注册完成
  iframeElement.addEventListener("load", () => {iframeElement.contentWindow.postMessage("这是一条信息", "*");});

  window.parent.postMessage(true); //通知app事件注册成功//接受iframe来的通知 基于rxjs去写事件的监听fromEvent<MessageEvent>(window, 'message').pipe(map(data => data.data)).pipe(takeUntil(this.ngUnsubscribe$)).subscribe(isLoaded => {if (isLoaded) {this.templatePreviewIframe.nativeElement.contentWindow.postMessage(数据);}});

总结

html

<iframe
#iframe
[src]="src"
frameborder="0"
></iframe>

src:string;
ngUnsubscribe$= new Subject();
@ViewChild('iframe') iframeElement: ElementRef<HTMLIFrameElement>;
constructor(private sanitizer: DomSanitizer
) {this.src = this.sanitizer.bypassSecurityTrustResourceUrl(`${path}`);
}ngOnInit(){fromEvent<MessageEvent>(window, 'message').pipe(map(data => data.data)).pipe(takeUntil(this.ngUnsubscribe$)).subscribe(isLoaded => {if (isLoaded) {this.templatePreviewIframe.nativeElement.contentWindow.postMessage(数据);}});
}ngOnDestroy(){this.ngUnsubscribe$.next();this.ngUnsubscribe$.complete();
}

iframe内容网页

ngOnInit(){fromEvent(window, 'message').subscribe((event: MessageEvent<any>) => {//todo});window.parent.postMessage(true); //通知app事件注册成功
}

相关文章：

iframe通过postMessage进行跨域通信以及在Angular中使用

写在前面 在前端开发过程中&#xff0c;会遇到一些需要使用iframe的场景&#xff0c;使用iframe关键的一个点是数据之间的传输&#xff0c;基于同源的要求十分苛刻&#xff0c;大家基本上是都是跨域的&#xff0c;如果跨域进行数据传输呢&#xff1f; 大家使用的比较多的就是p…...

编程日记 2023/8/31 5:25:54

rust学习-引用C库

link和extern #[link(name = "...")] 是一个用于链接外部库的属性宏。 可以在 Rust 代码中引入其他语言编写的动态链接库（.so、.dll 等文件），从而实现 Rust 和其他语言的互操作。 #[link(name = "...")] 属性宏用于在 Rust 模块中引入标准 C 库（如 m…...

编程日记 2023/8/31 5:24:53

WebAssembly 在云原生中的实践指南

1 WebAssembly 介绍 WebAssembly&#xff08;Wasm&#xff09;是一种通用字节码技术&#xff0c;它可以将其他编程语言&#xff08;如 Go、Rust、C/C 等&#xff09;的程序代码编译为可在浏览器环境直接执行的字节码程序。 WebAssembly 的初衷之一是解决 JavaScript 的性能问…...

编程日记 2023/8/31 5:23:50

Azure sqlserver 更改字符集

前言 我们的Azure SQL Server是在2018年建的&#xff0c;当时还不支持汉字的字符集。然后最近发现因为字符集的缘故&#xff0c;出了bug&#xff0c;要调整字符集。然后就照着sqlserver 排序规则&#xff08;字符集&#xff09;查看与修改 一通修改。 然后神奇的事情来了&…...

编程日记 2023/8/31 5:22:48

git push时,由于commit了大文件无法成功push的解决办法

2句命令解决&#xff01; 如图可以看见大文件的md5值&#xff0c;复制下来&#xff0c;以下命令会使用到 命令1&#xff1a; git rev-list --objects --all | grep b8d13387c0dfd7a8cec9ff0f6c8ded06eb21556f执行上面命令将得到&#xff0c;如下的输出&#xff0c;可以得知是…...

编程日记 2023/8/31 5:21:47

2023_Spark_实验一：Windows中基础环境安装

Ⅰ、WINDOWS中安装JDK1.8 一、下载安装包 链接&#xff1a;百度网盘 请输入提取码 所在文件夹&#xff1a;根目录或者大数据必备工具--》开发工具(前端后端)--》后端 下载文件名称&#xff1a;jdk-8u191-windows-x64.exe 二、安装JDK 1.现在转到下载的exe文件可用的文件夹&…...

编程日记 2023/8/31 5:20:46

如何在Windows / Mac / iPhone / Android / Online上将MP4转换为MP3

如果只想保留MP4视频的音频轨道&#xff0c;则可以将MP4转换为MP3格式。 MP3是几乎所有设备&#xff0c;播放器和编辑器都支持的数字音频格式。无论您将MP4视频转换为MP3音频以进行脱机播放或进一步编辑&#xff0c;都可以提取音轨并保存为MP3格式。这是在不损失质量的情况下将…...

编程日记 2023/8/31 5:19:43

【App端】uni-app使用百度地图api和echarts省市地图下钻

目录 前言方案一&#xff1a;echarts百度地图获取百度地图AK安装echarts和引入百度地图api完整使用代码 方案二&#xff1a;echarts地图和柱状图变形动画实现思路完整使用代码 方案三&#xff1a;中国地图和各省市地图下钻实现思路完整使用代码 前言 近期的app项目中想加一个功…...

编程日记 2023/8/31 5:18:42

深度学习（十）--- cv2.pointPolygonTest() 判断一点是否在指定区域内

今天发现了opencv一个好用的函数 cv2.pointPolygonTest() &#xff0c;它可以判断一个点是否在指定区域内。 1. cv2.pointPolygonTest() 函数解析 dist cv2.pointPolygonTest(contour,point,Boolean)contour: 多边形轮廓 point: 坐标点 Boolean:True或False &#xff0c;Tru…...

编程日记 2023/8/31 5:17:40

后端面试话术集锦第 八 篇：redis面试话术

这是后端面试集锦第八篇博文——redis面试话术❗❗❗ 1. 介绍一下redis Redis是一个非关系数据库，我们项目中主要用它来存储热点数据的，减轻数据库的压力，单线程纯内存操作，采用了非阻塞IO多路复用机制，就是单线程监听，我们项目中使用springdata-redis来操作redis。 我…...

编程日记 2023/8/31 5:16:39

LiteOS qemu realview-pbx-a9 环境搭建与运行

前言 最近打算移植搭建 一些常见的 RTOS 的 qemu 开发学习环境&#xff0c;当前 RT-Thread、FreeRTOS 已经成功运行 qemu&#xff0c;LiteOS 初步验证可以正常 运行 qemu realview-pbx-a9&#xff0c;这里做个记录 首先学习或者研究 RTOS&#xff0c;只是看内核源码&#xff0…...

编程日记 2023/8/31 5:15:38

Kubernetes技术--Kubernetes架构组件以及核心概念

1.Kubernetes集群架构组件 搭建一个Kubernetes环境集群，其架构如下所示: 内容详解: Master:控制节点，指派任务、决策 Node:工作节点，实际干活的。 Master组件内容:...

编程日记 2023/8/31 5:14:37

拿来即用修改密码功能

<template><div><!-- 重置密码 --><el-dialogtitle"修改密码"v-model"state.resetPwdDialogVisible":showClose"state.firstLogin ! 1"width"550px"close"onCancel":close-on-click-modal"false&…...

编程日记 2023/8/31 5:13:36

违背原则才能写好代码（一）

如果我说&#xff0c;要写好代码&#xff0c;必须违背这些原则&#xff0c;我想所有人都会骂&#xff1a;疯子、胡说八道、哗众取宠&#xff0c;找打&#xff01; 以前我也会骂那个疯子&#xff0c;但现在不会&#xff0c;而且我会肯定地、负责任地说&#xff1a;这是真的&…...

编程日记 2023/8/31 5:12:35

面试官眼中的理想候选人：如何成为他们的首选

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

编程日记 2023/8/31 5:11:33

ES6中的扩展运算符你真的会用吗？

本文不会具体介绍扩展运算符的基本用法。 只是分享在项目中踩坑的点。 你以为的扩展运算符只是复制的功能&#xff0c;其实会偷偷修改你的原数组 案例&#xff1a; 假如arr [...arr2] &#xff0c;修改arr的值会改变arr2的值吗? 解决方案&#xff1a; case1 使用 arr […...

编程日记 2023/8/31 5:10:32

利用逻辑回归判断病人肺部是否发生病变

大家好&#xff0c;我是带我去滑雪&#xff01; 判断肺部是否发生病变可以及早发现疾病、指导治疗和监测疾病进展&#xff0c;以及预防和促进肺部健康&#xff0c;定期进行肺部评估和检查对于保护肺健康、预防疾病和提高生活质量至关重要。本期将利用相关医学临床数据结合逻辑回…...

编程日记 2023/8/31 5:09:31

全民健康生活方式行动日，天猫健康联合三诺生物推出“15天持续测糖计划”

糖尿病是全球高发慢性病中患病人数增长最快的疾病&#xff0c;是导致心血管疾病、失明、肾衰竭以及截肢等重大疾病的主要病因之一。目前中国有近1.4亿成人糖尿病患者&#xff0c;科学的血糖监测和健康管理对于糖尿病患者来说至关重要。 在9月1日全民健康生活方式行动日前夕&am…...

编程日记 2023/8/31 5:08:30

设计模式行为型-状态模式

文章目录 简介状态模式基础定义状态接口或抽象类实现具体状态类 上下文类与状态转换上下文类的定义和作用状态转换及触发条件 状态模式的优势与适用性优点一&#xff1a;可维护的代码优点二&#xff1a;清晰的状态管理适用场景一&#xff1a;对象拥有多个状态适用场景二&#x…...

编程日记 2023/8/31 5:07:29

弹窗、抽屉、页面跳转区别 | web交互入门

当用户点击或触发浏览页面的某个操作&#xff0c;有很多web交互方式&#xff0c;可以大致分为弹窗、抽屉、跳转新页面三种web交互方式。虽然这三种web交互方式看起来没什么不同&#xff0c;但实际上弹窗、抽屉、跳转新页面对交互体验有蛮大的影响。 这需要UI\UX设计师针对不同…...

编程日记 2023/8/31 5:06:28

2026年华为云OpenClaw如何安装？配置百炼API零门槛10分钟步骤

2026年华为云OpenClaw如何安装&#xff1f;配置百炼API零门槛10分钟步骤。OpenClaw&#xff08;曾用名Clawdbot&#xff09;是一款轻量化、可扩展的开源AI智能体执行框架&#xff0c;支持自然语言指令驱动、多模型灵活切换与全场景任务自动化。对于新手而言&#xff0c;阿里云轻…...

编程新知 2026/4/1 9:32:02

Anaconda环境下Spyder升级保姆级教程（附常见问题解决方案）

Anaconda环境下Spyder升级全攻略与疑难排解手册 在Python数据科学领域&#xff0c;Spyder作为专为科学计算设计的集成开发环境(IDE)&#xff0c;凭借其变量查看器、交互式控制台和强大的调试功能&#xff0c;已成为众多研究人员的首选工具。而Anaconda作为Python科学计算的瑞士…...

编程新知 2026/4/1 9:21:47

避坑指南：新到手的NUC 13装Ubuntu，WiFi驱动对了但图标不显示？可能是AX211网卡在Linux下的‘通病’

NUC 13安装Ubuntu后WiFi图标消失的深度排查与解决方案 刚拿到手的Intel NUC 13装上Ubuntu系统&#xff0c;WiFi驱动看似正常却不见图标&#xff1f;这可能是AX211网卡在Linux下的"通病"。作为一名长期与硬件兼容性问题打交道的技术顾问&#xff0c;我遇到过太多类似…...

编程新知 2026/4/1 9:17:42

当 Go 还在追求极简时，C++ 26 却又加了四大“史诗级”新特性

大家好&#xff0c;我是Tony Bai。在这个 Go、Zig 等“小而美”新语言颇受青睐的时代&#xff0c;如果你去技术社区里问一句&#xff1a;“C 这门语言怎么样&#xff1f;”你大概率会得到一堆充满戏谑的回答&#xff1a;“太复杂了&#xff0c;别学”、“从入门到放弃”、“面试…...

编程新知 2026/4/1 9:15:41

如何通过Nucleus Co-Op实现创新无缝的本地多人游戏体验

如何通过Nucleus Co-Op实现创新无缝的本地多人游戏体验 【免费下载链接】nucleuscoop Starts multiple instances of a game for split-screen multiplayer gaming! 项目地址: https://gitcode.com/gh_mirrors/nu/nucleuscoop 你是否曾经希望在同一台电脑上与朋友共同体…...

编程新知 2026/4/1 9:13:36

ZGC在超大堆（＞16TB）下的隐性崩溃风险：JDK17~21版本兼容性断层分析（仅限内测团队知晓）

第一章&#xff1a;ZGC在超大堆&#xff08;>16TB&#xff09;下的隐性崩溃风险&#xff1a;JDK17~21版本兼容性断层分析&#xff08;仅限内测团队知晓&#xff09;当堆内存突破16TB阈值后&#xff0c;ZGC在JDK17至JDK21的多个GA版本中暴露出未公开的元数据结构越界行为——…...

编程新知 2026/4/1 9:13:36

Python 批量导出数据库数据至 Excel 文件

简介 langchain专门用于构建LLM大语言模型&#xff0c;其中提供了大量的prompt模板&#xff0c;和组件&#xff0c;通过chain(链)的方式将流程连接起来&#xff0c;操作简单&#xff0c;开发便捷。 环境配置 安装langchain框架 pip install langchain langchain-community 其中…...

编程新知 2026/4/1 8:51:09

5分钟搞懂线结构光三维重建：从激光平面到深度信息的完整流程

线结构光三维重建&#xff1a;从激光平面到深度信息的实战解析 当你第一次看到激光线扫过物体表面时&#xff0c;可能不会想到这条细细的光线背后隐藏着精确测量物体三维形状的能力。线结构光三维重建技术正悄然改变着工业检测、逆向工程和医疗影像等领域——它不需要接触物体…...

编程新知 2026/4/1 8:38:55

从农田到实验室：大疆P4M多光谱数据与ASD地物波谱仪实测数据对比实操指南

从农田到实验室&#xff1a;大疆P4M多光谱数据与ASD地物波谱仪实测数据对比实操指南 当无人机掠过农田上空&#xff0c;搭载的多光谱传感器正在以厘米级分辨率记录作物的生理状态。这些数据能否真实反映地表反射特性&#xff1f;本文将以大疆P4M多光谱无人机与ASD FieldSpec系…...

编程新知 2026/4/1 8:02:03

PyTorch核心模块实战指南：从nn.Sequential到nn.MaxPool2d的深度解析

1. 快速上手nn.Sequential&#xff1a;像搭积木一样构建神经网络 第一次接触PyTorch时&#xff0c;我被各种复杂的网络结构吓到了——直到发现nn.Sequential这个"乐高积木盒"。这个容器让我能用拼积木的方式组合网络层&#xff0c;比如下面这个图像分类器的经典结构&…...

编程新知 2026/4/1 7:45:33