js 不同域iframe 与父页面消息通信

不同域iframe 与父页面消息通信

  • 💡访问 iframe 页面中的方法
  • 💡跨文本消息
    • 监听消息
    • 发送消息

var iframe = document.getElementById("myIframe");
var iframeWindow = iframe.contentWindow;

💡访问 iframe 页面中的方法

iframeWindow.methodName();

其中,methodName 为 iframe 页面中定义的方法名。需要注意的是,父页面和 iframe 页面必须同源(即协议、域名和端口号相同)才能访问彼此的方法。如果两个页面不同源,则会出现跨域问题,无法相互访问。

💡跨文本消息

跨文档消息(Cross-document Messaging):使用postMessage API,在父页面和iframe之间进行消息通信。这样可以安全地在不同域之间传递数据,但需要在父页面和iframe中编写消息监听和处理的逻辑。

监听消息

💡在父页面中添加消息监听器,监听来自iframe的消息:

window.addEventListener("message", function(event) {  // 判断消息来源是否为iframe  if (event.source !== iframe.contentWindow) {  return;  }  // 处理接收到的消息  console.log(event.data);  
}, false);

💡在iframe页面中添加消息监听器,监听来自父页面的消息:

window.addEventListener("message", function(event) {  // 判断消息来源是否为父页面  if (event.source !== parent.window) {  return;  }  // 处理接收到的消息  console.log(event.data);  
}, false);

发送消息

💡在父页面中向iframe发送消息

iframe.contentWindow.postMessage("Hello, iframe!", "https://example.com");

💡在iframe页面中向父页面发送消息

parent.window.postMessage("Hello, parent!", "https://example.com");

其中,postMessage方法的第一个参数为要发送的消息,第二个参数为接收消息的域(目标页面的window.location.href),用于验证消息来源的安全性。需要注意的是,在使用postMessage进行消息通信时,需要确保父页面和iframe的通信协议和消息格式的定义一致,以避免出现通信失败或数据解析错误等问题。

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

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

相关文章

java基础-集合-ConcurrentHashMap源码学习

文章目录 putValinitTableget putVal final V putVal(K key, V value, boolean onlyIfAbsent) {// 不允许 key或value 为null,HashMap允许 key 为nullif (key null || value null) throw new NullPointerException();// 计算hash,将key的hashCode的高…

Stable Diffusion WebUI内存不够爆CUDA Out of memory怎么办?

在我们运行SD的时候,我们经常会爆CUDA Out of memory。 我们应该怎么办呢? 这是因为我们的显存或者内存不够了。 如果你是用cpu来跑图的则表示内存不够,这个时候就需要换个大点的内存了。 如果你是用gpu来跑图的就说明你显存不够用咯,这时候咋办呢? 下面我将一一述说…

Zookeeper运维

我是一个目录 1. 参数说明2. Zookeeper优化建议3. Zookeeper性能查看4. 建议 1. 参数说明 工作节点瞬间压力大,导致和集群通信出现延迟,被踢出节点,瞬间释放的连接立即又连接到另外节点,最终集群挂掉。加了一些延迟配置后&#xf…

华为云创新中心黑湖科技:将智能制造进行到底

编辑:阿冒 设计:沐由 一如去年,第二届828 B2B企业节从8月28日-9月15日期间,再一次成为广大企业界关注的焦点。 当前,数字技术已经被广泛被融入到产品、服务与流程当中,用以转变客户的业务成果,以…

ChatGPT在职业规划中的智能助手

随着科技的不断发展,人工智能(AI)正逐渐成为我们日常生活的一部分。ChatGPT作为一种智能语言模型,可以在职业规划中充当智能助手的角色。本文将探讨ChatGPT在职业规划中的应用,以及它如何成为未来工作的智能伙伴。 首先…

基于SpringBoot+Vue实现的党校培训管理系统源代码+数据库

一、简介 项目简介: 基于微服务架构的党校培训管理系统, 完整代码下载地址:党校培训管理系统 大体总结: 前端使用Vue.js框架,UI组件库使用Element UI与Ant Design Vue,后端基于Spring Boot,使…

实现客户端pineline的思路

背景: redis集群不支持客户端的mget操作,但是业务上对这个redis集群的批量操作的需求一直都在,所以有各种客户端实现了各式各样的pineline实现,本文就记录下我们公司的实现方式 pineline实现思路 1.pineline要快 pineline之所以快是因为可…

mybatis mapper.xml 文件外键映射

1.业务背景 最近负责标签管理业务,因为设计打标签功能就需要用到中间表。在之前的写法,将符合的数据先查询出来在应用层做匹配封装。如果是大表关联性复杂考虑到之后的扩展性,这种写法符合要求的,唯一缺点就是让你代码看的很臃肿&…

面试算法6:排序数组中的两个数字之和

题目 输入一个递增排序的数组和一个值k,请问如何在数组中找出两个和为k的数字并返回它们的下标?假设数组中存在且只存在一对符合条件的数字,同时一个数字不能使用两次。例如,输入数组[1,2,4,6&…

【华为重启门】华为/荣耀手机一直自动重启原因解决方案(荣耀V10)

文章目录 【目前:系统回退安卓10、CPU贴了硅胶片。一天没重启了】1.问题描述2.分析原因3.解决方案4.实际操作 【目前:系统回退安卓10、CPU贴了硅胶片。一天没重启了】 1.问题描述 荣耀V10,莫名其妙的、无规律的死机重启。 一开始是重启后进…

Ubuntu22.04配置WiFi

Ubuntu22.04配置WiFi 注意:在/etc/netplan/​下的配置文件,格式一定要正确,否则用sudo netplan try​的时候会报错 一、查看无线网卡的名称 //choice-1 ls /sys/class/net//choice-2 ip a//choice-3 ifconfig -a‍ 二、修改配置文件 文件…

jmeter接口测试及详细步骤以及项目实战教程

在接口测试项目实战中,JMeter是一款非常强大和流行的自动化测试工具,它可以测试各种类型的应用程序,并通过采样和报告来识别性能瓶颈和API的问题。本文将为你提供一个基于实际项目的JMeter接口测试项目实战教程,指导你如何使用JMe…

分布式事务解决方案之2PC

分布式事务解决方案之2PC 前面已经学习了分布式事务的基础理论,以理论为基础,针对不同的分布式场景业界常见的解决方案有2PC、 TCC、可靠消息最终一致性、最大努力通知这几种。 什么是2PC 2PC即两阶段提交协议,是将整个事务流程分为两个阶段…

一种新的图像去噪方式:图像修补+斑点检测的预处理

灵感来源于我之前写的一篇博客:图像处理:基于cv2.inpaint()图像修补。 这种方式可以有效的去除白色的噪点,这里我们需要一张噪点的图像,你可以用下面的代码随机生成一张噪点图片: import cv2 import numpy as np # i…

软件设计模式系列之六——单例模式

1 模式的定义 单例模式(Singleton Pattern)是一种常见的创建型设计模式,其主要目的是确保一个类只有一个实例,并提供一个全局访问点来获取该实例。这意味着无论何时何地,只要需要该类的实例,都会返回同一个…

二刷力扣--栈和队列

栈和队列 栈和队列基础(Python) 栈一种先进后出,队列先进后出。 Python中可以用list实现栈,用append()模拟入栈,用pop()模拟出栈。 也可以用list实现队列,但是效率较低,一般用collections.deq…

vue2以ElementUI为例构建notify便捷精美提示

我们先引入一个 第三方UI库 这里 我们以elementUI为例 先引入依赖 npm install element-ui --save然后 在 main.js 入口文件中 引入一下 import ElementUI from element-ui import element-ui/lib/theme-chalk/index.cssVue.use(ElementUI)然后 在组件中使用 this.$notify({…

如何使用 RunwayML 进行创意 AI 创作

标题:如何使用 RunwayML 进行创意 AI 创作 介绍 RunwayML 是一个基于浏览器的人工智能创作工具,可让用户使用各种 AI 功能来生成图像、视频、音乐、文字和其他创意内容。RunwayML 的功能包括: * 图像生成:使用生成式对抗网络 (…

每日刷题-6

目录 一、选择题 二、算法题 1.Fibonacci数列 2.合法括号序列判断 一、选择题 1、 解析:内联函数是一种可以提高函数执行效率的方法,它的原理是编译时在函数调用点直接展开函数体的代码,从而避免了函数调用的开销。 但是,内联函…

Haproxy负载均衡集群 超详细 (附部署实例)

Haproxy 一、Web集群调度器1.1 常用的Web集群调度器1.2 常用集群调度器的优缺点(LVS ,Nginx,Haproxy)1.2.1 Nginx1.2.2 LVS1.2.3 Haproxy 1.3 LVS、Nginx、Haproxy的区别 二、Haproxy2.1 简介2.2 Haproxy的主要特性2.3 Haproxy应用分析2.4 Haproxy的调度算法(负载均…