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

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

news 文章来源：https://blog.csdn.net/m0_54944506/article/details/132583412 2025/5/1 5:08:35

写在前面

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

说说Flink运行模式

分析&回答 1.开发者模式 在idea中运行Flink程序的方式就是开发模式。 2.local-cluster模式 Flink中的Local-cluster(本地集群)模式,单节点运行&#xff0c;主要用于测试, 学习。 3.Standalone模式 独立集群模式&#xff0c;由Flink自身提供计算资源。 4.Yarn模式 把Fl…...

编程日记 2023/8/31 5:05:27

视频汇聚/视频云存储/视频监控管理平台EasyCVR新增首次登录强制修改密码

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。视频汇聚平台既具…...

编程日记 2023/8/31 5:04:26

C语言控制语句——分支语句

条件语句用来根据不同的条件来执行不同的语句&#xff0c;C语言中常用的条件语句包括if语句和switch语句。 if 语句 语法格式&#xff1a; if (条件) {条件成立时&#xff0c;要做的事…… }案例需求&#xff1a; 定义一个整数变量记录年龄判断是否满 18 岁 &#xff08;>…...

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

音视频 fmpeg命令裁剪和合并视频

一、生成测试文件 找三个不同的视频每个视频截取10秒内容 ffmpeg -i 沙海02.mp4 -ss 00:05:00 -t 10 -codec copy 1.mp4 ffmpeg -i 复仇者联盟3.mp4 -ss 00:05:00 -t 10 -codec copy 2.mp4 ffmpeg -i 红海行动.mp4 -ss 00:05:00 -t 10 -codec copy 3.mp4如果音视频格式不统一…...

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

机器学习基础17-基于波士顿房价（Boston House Price）数据集训练模型的整个过程讲解

机器学习是一项经验技能&#xff0c;实践是掌握机器学习、提高利用机器学习 解决问题的能力的有效方法之一。那么如何通过机器学习来解决问题呢&#xff1f; 本节将通过一个实例来一步一步地介绍一个回归问题。 本章主要介绍以下内容&#xff1a; 如何端到端地完成一个回归问题…...

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

哈希的应用——布隆过滤器

✅<1>主页&#xff1a;&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;数据结构——位图 ☂️<3>开发环境&#xff1a;Visual Studio 2022 &#x1f4ac;<4>前言&#xff1a;布隆过滤器是由布隆&#xff08;Burton Howard Bloom&…...

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

LNMT的多机部署和双机热备

目录 一、环境 二、配置tomcat 三、配置nfs共享 四、配置nginx 1、两台都需要折磨配置 2、在http下面插入这两条信息 五、配置keepalived 1、安装 2、重新启动一下keepalived查看IP 六、验证双机热备 1、查看调度器备的IP&#xff0c;ip漂移说明keepalived生效 2、访…...

编程日记 2023/8/31 4:59:20

软件测试/测试开发丨Pytest和Allure报告 学习笔记

点此获取更多相关资料 本文为霍格沃兹测试开发学社学员学习笔记分享 原文链接&#xff1a;https://ceshiren.com/t/topic/26755 Pytest 命名规则 类型规则文件test_开头 或者 _test 结尾类Test 开头方法/函数test_开头注意&#xff1a;测试类中不可以添加__init__构造函数 注…...

编程日记 2023/8/31 4:58:19

十七、命令模式

一、什么是命令模式 命令&#xff08;Command&#xff09;模式的定义&#xff1a;将一个请求封装为一个对象&#xff0c;使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通&#xff0c;这样方便将命令对象进行储存、传递、调用、增加与管理。   命令…...

编程日记 2023/8/31 4:57:18

服务器安装 anaconda 及 conda: command not found [解决方案]

[解决方案] conda: command not found Anaconda3 安装conda: command not found Anaconda3 安装 由于连接的服务器&#xff0c;无法直接在anaconda官网上下载安装文件&#xff0c;所以使用如下方法&#xff1a; wget https://repo.anaconda.com/archive/Anaconda3-2023.03-Li…...

编程日记 2023/8/31 4:56:17