iframe通信postMessage

iframe嵌入页面是实现微前端的方式之一。由于浏览器的跨域限制,iframe与父页面之间的通信变得不是那么容易。postMessage解决了这个问题。从广义上讲,一个窗口可以获得对另一个窗口的引用(比如 targetWindow = window.parent),然后在窗口上调用 targetWindow.postMessage() 方法分发一个 MessageEvent 消息。

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

注意: 此处的otherWindow指的是目标页面的一个引用,比如 iframe 的 contentWindow,也就是你想往哪里发送信息,就要使哪里的window。

  • 第一个参数是发送的消息对象;
  • 第二个参数表示目标地址,通过窗口的 origin 属性来指定哪些窗口能接收到消息事件,其值可以是字符串"*"(表示无限制)或者一个 URI。
  • 第三个参数可选,是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。

实例

父传子

父页面通过一个按钮将一条消息发送到嵌入的iframe中,并在iframe中显示该消息
父页面结构

	//页面结构<p>mian页面</p><p id="message">iframe发来的消息:</p><p><button id="pButton">发消息</button></p><div class="frameWrap"><iframe id='iframe' src="./iframe.html" frameborder="0"></iframe></div>

父页面js代码

   let button = document.querySelector('#pButton')let iframe = document.querySelector('#iframe')button.addEventListener('click',function(){//alert(1)iframe.contentWindow.postMessage('父页面发送的消息就是我','*')})

子页面iframe的结构

  <div id="content">我是iframe</div><button>发消息</button>

子页面js代码

	//在子页面的window上添加监听message事件,在事件方法中获取消息,并显示window.addEventListener('message',function(e){document.querySelector("#content").innerHTML = e.data})

在这里插入图片描述

子传父

子页面获取父页面window的引用,并发送消息

 let button = document.querySelector('button')button.addEventListener('click',e=>{window.parent.postMessage('我是子组件发送的消息','*')})

父页面监听message事件,并显示出来。

  window.addEventListener('message',e => {document.querySelector('#message').innerHTML=e.data})

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/833523.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql:交叉连接、内连接

打开Navicat Premium&#xff0c;新建数据库&#xff0c;创建两个表dept和emp&#xff1a; create table dept(did int(4) primary key,dname varchar(36)); create table emp(id int(4) primary key,name varchar(36),age int(2),did int(4) not null); 插入数据&#xff1a…

spring bean生命周期全部过程

Spring Bean的生命周期包括以下全部过程&#xff1a; 实例化&#xff1a;在Spring容器启动时&#xff0c;根据配置文件或注解等信息创建Bean的实例。属性赋值&#xff1a;如果Bean有属性需要进行初始化&#xff0c;Spring容器会自动为这些属性进行赋值。自定义初始化方法&…

线程理论篇1

本章问题&#xff1a;什么是线程?线程的使用场景&#xff1f;什么是线程池&#xff1f;线程池是如何工作的&#xff1f;线程池共享了哪些资源?线程安全代码怎么写&#xff1f;什么是线程安全? 什么是线程&#xff1f; 线程是为了提高进程的效率。进程的地址空间中保存了cpu…

【mysql】mysql单表查询、多表查询、分组查询、子查询等案例详细解析

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

嵌入式C语言高级教程:实现基于STM32的人工智能语音识别系统

在嵌入式系统中实现语音识别技术可以极大地增强设备的交互性。本教程将指导您如何在STM32微控制器上使用TensorFlow Lite for Microcontrollers实现基本的语音识别功能。 一、开发环境准备 硬件要求 微控制器&#xff1a;STM32F746NG&#xff0c;支持足够的运算能力和内存来…

spring高级篇(七)

1、异常处理 在DispatcherServlet中&#xff0c;doDispatch(HttpServletRequest request, HttpServletResponse response) 方法用于进行任务处理&#xff1a; 在捕获到异常后没有立刻进行处理&#xff0c;而是先用一个局部变量dispatchException进行记录&#xff0c;然后统一由…

VMware虚拟机中ubuntu使用记录(5)—— 如何在ubuntu中安装USB相机ros驱动并获取usb摄像头数据

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、ROS下USB相机驱动1.准备工作(1) 下载驱动(2) 创建ROS工作空间 2. 安装usb_cam驱动(1) 安装usb_cam驱动包(2) 编译代码 3. 修改usb_cam驱动的配置文件(1) 查看US…

掌握TypeScript的非空断言(!)和可选链(?):开发效率翻倍!

引言 标题&#xff1a;掌握TypeScript的非空断言和可选链&#xff1a;开发效率翻倍&#xff01;简短介绍&#xff1a;在TypeScript中&#xff0c;?和!操作符是提高代码安全性和开发效率的强大工具。本文将为你揭示它们的使用方式和最佳实践。 背景知识 易于理解的解释&…

vue2+@tinymce/tinymce-vue富文本编辑器的实现

1.使用的第三方的库 npm install @tinymce/tinymce-vue@3.2.8 tinymce@5.10.9 --save 2.引入应用,直接上代码,支持上传图片,视频 <template><div class="tinymce-container" ref="tinymceContainer"><Eidtor api-key="" v-if…

一路串联电机的绕制原理

这里要说明的一点是 对于一路串联的电机&#xff0c;无论是一把线圈还是两把线圈&#xff0c;出来的都是只有两个线头&#xff0c;可看做一个整体来对待&#xff01; 绕制具体原理 同心式线圈绕制 前面说的都是等距式的 线圈绕制&#xff0c;下面我们讲解一下同心式的绕制办法…

numpy学习笔记8

对不同列标识不同信息进行数据读取时 步骤&#xff1a; 1.根据不同列的数据标识的含义和类型&#xff0c;因此需要自定义数据类型 2.使用自定义的数据类型读取数据 有点类似于数据库读取数据操作 例子: # 1. 以上数据由于不同列数据标识的含义和类型不同,因此需要自定义数据类…

整体意义的构成与构建

输入数据中不同部分之间的复杂关系是指数据中各个元素如何相互作用和相互影响以构成整体意义的能力。 理解上述观点可以从以下几个方面进行&#xff1a; 元素的相互作用&#xff1a;在任何给定的数据集中&#xff0c;单个数据元素往往不是孤立存在的。它们之间存在某种形式的交…

692. 前K个高频单词 、KY264 单词识别

692. 前K个高频单词 - 力扣&#xff08;LeetCode&#xff09; //#include<set> class Solution { public://仿函数struct compare{bool operator()(const pair<string,int>& kv1,const pair<string,int>& kv2){return kv1.second > kv2.second;}…

天星金融(原小米金融)持续稳健发展,小米集团2023年质量效益实现双提升

近期&#xff0c;小米集团发布了其2023年财报。数据显示&#xff0c;小米集团在过去的一年里取得了令人瞩目的成绩&#xff0c;总收入达到了2710亿元&#xff0c;经调整后的净利润高达193亿元&#xff0c;同比大增126.3%。 2023年是小米贯彻执行“规模与利润并重”经营策略的第…

##07 从线性回归到神经网络:PyTorch实战解析

文章目录 前言线性回归基础理论背景实现步骤 神经网络介绍理论背景实现步骤 从线性回归到神经网络结论 前言 在深度学习的浩瀚宇宙中&#xff0c;线性回归和神经网络是两个基本但极其重要的概念。线性回归模型是统计学和机器学习的基石之一&#xff0c;而神经网络则是深度学习…

大模型能提高工作效率吗?

大模型可以通过多种方式提高办公效率&#xff0c;尤其是在处理信息和数据方面。 下是一些具体的应用场景&#xff1a; 自动化文档处理&#xff1a; 大模型可以自动处理文档&#xff0c;包括阅读、理解和总结长篇文章或报告&#xff0c;以及自动生成摘要或关键点。 自然语言生…

[开发|鸿蒙] DevEco Studio编译构建(笔记,持续更新)

构建体系 编译构建是将应用/服务的源代码、资源、第三方库等&#xff0c;通过编译工具转换为可直接在硬件设备上运行的二进制机器码&#xff0c;然后再将二进制机器码封装为HAP/APP软件包&#xff0c;并为HAP/APP包进行签名的过程。其中&#xff0c;HAP是可以直接运行在模拟器…

C++算法题 - 二叉树(2)

TOC 114. 二叉树展开为链表 LeetCode_link 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链表应该同样使用 TreeNode &#xff0c;其中 right 子指针指向链表中下一个结点&#xff0c;而左子指针始终为 null 。展开后的单链表应该与…

2024年全国五大数学建模竞赛Top榜及难度分析!推荐数维杯!!!

发现最近许多同学都陆续开始准备今年的数学建模竞赛了&#xff0c;但是随着数学建模领域越来越普及&#xff0c;影响力越来越广泛&#xff0c;参加的同学也越来越多&#xff0c;就导致有越来越多各式各样的数学建模竞赛此起彼伏出现&#xff0c;但其中有一些竞赛其实并不值得参…

嵌入式学习day13

每日面试题 解释堆和栈的区别 ①申请方式 stack&#xff08;栈&#xff09;&#xff1a;由编译器自带分配释放&#xff0c;存在函数的参数值&#xff0c;局部变量等。 heap&#xff08;堆&#xff09;&#xff1a;程序员自己申请&#xff0c;并指明大小&#xff08;malloc函数…