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

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

news 2025/11/5 9:37:34

写在前面

在前端开发过程中，会遇到一些需要使用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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/9/19 8:02:57

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/10/31 21:17:09

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2025/11/2 13:39:39

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/11/2 17:07:38

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...

编程新知 2025/10/18 21:05:27

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2025/11/1 0:56:40

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/10/30 4:02:31

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/11/2 15:13:29

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/11/1 2:19:50

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

编程新知 2025/10/29 17:36:05