iframe内部子页面与外部主页面通讯

文章目录

  • 一、问题
  • 二、解决
    • 2.1、子页面
    • 2.2、主页面
  • 三、知识点
    • 3.1、[浏览器兼容性](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7)
    • 3.2、详解
      • 3.2.1、发送方
      • 3.2.2、接收方

一、问题

如上所示,红框内是内嵌iframe的网站。点击同意或拒绝后,需要通知iframe外的网站处理对应响应,这就是本篇文章需要解决的问题

二、解决

2.1、子页面

子页面发起通讯,可以设置传参,代码如下:

window.parent.postMessage({type: 'success',message: '成功'
}, "*")

2.2、主页面

主页面初始化时通过window.addEventListener,监听message,在回调中处理发送过来的响应或者处理相关参数,代码如下:

const fun = (e) => {// e.data为子页面发送的数据console.log('message', e.data); // { type: 'success', message: '成功' }
}
// 页面启动监听
window.addEventListener('message', fun, false);
// 页面卸载时需要销毁监听
window.removeEventListener('message', fun);

三、知识点

3.1、浏览器兼容性

3.2、详解

安全、可靠且支持跨域的 iframe 通信方式,它可以在两个窗口之间异步传递消息。

3.2.1、发送方

在发送方中,使用 window.postMessage() 方法向另一个窗口发送消息。该方法接收两个参数:

  1. 要发送的消息
  2. 目标窗口的源(例如,"http://127.0.0.1:5500/child.html""*"

3.2.2、接收方

在接收方中,使用 window.addEventListener() 方法监听 message 事件。该事件对象包含三个属性:

  1. data 表示接收到的数据
  2. origin 表示发送方的源
  3. source 表示发送方窗口的引用

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

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

相关文章

STM32 中断系统

单片机学习 目录 文章目录 前言 一、中断系统 1.1 什么是中断 1.2 中断优先级 1.3 中断嵌套 1.4 C语言中的中断程序 二、STM32的中断通道和中断向量 2.1 中断通道 2.2 嵌套向量中断控制器NVIC 2.2.1 什么是NVIC 2.2.2 NVIC基本结构 2.2.3抢占优先级和响应优先级 2.2.4 NVIC的优…

基于C#实现线段树

一、线段树 线段树又称"区间树”,在每个节点上保存一个区间,当然区间的划分采用折半的思想,叶子节点只保存一个值,也叫单元节点,所以最终的构造就是一个平衡的二叉树,拥有 CURD 的 O(lgN)的时间。 从…

【miniQMT实盘量化5】获取财务报表数据

前言 上面文章,我们介绍了如何获取实时数据,这篇文章,我们继续往下探讨,介绍关于财务报表数据的获取。 财务报表数据 财务报表数据,也就是常说的基本面数据,是除了行情数据之外,辅助我们投资…

WordPress站点屏蔽过滤垃圾评论教程(Akismet反垃圾评论插件)

前段时间我的WordPress站点经常收到垃圾评论的轰炸,严重时一天会收到几十条垃圾评论。我这个小破站一没啥流量,二又不盈利,实在是不太理解为啥有人要这么执着地浪费资源在上面。 Akismet反垃圾评论插件 其实用了 Akismet 反垃圾评论插件后&a…

Proteus下仿真AT89C51报“串行口通信失败,请检查电平适配是否正确。”解决办法

在Proteus下进行AT89C51串行口仿真时,如果遇到“串行口通信失败,请检查电平适配是否正确”的错误提示,以下是一些解决办法: 1. 了解AT89C51和外部设备的电平要求: 首先,了解AT89C51和外部设备之间的电平…

node版本管理工具-nvm

1、 下载地址 https://github.com/coreybutler/nvm-windows/releases/tag/1.1.11 2、 选择安装地址不能有空格,中文 3、 使用命令

视频网关简介

在数字化时代,视频通信已经成为了人们日常生活和工作中的重要部分。为了满足不同设备和平台之间的视频通信需求,各种视频协议应运而生。然而,这些协议之间的差异使得相互通信变得复杂。因此,视频网关作为一种重要的网络设备&#…

前端已死?看看我的秋招上岸历程

背景 求职方向:web前端 技术栈:vue2、springboot(学校开过课,简单的学习过) 实习经历:两段,但都是实训类的,说白了就是类似培训,每次面试官问起时我也会坦诚交代&…

实例讲解:在3dMax中如何使用python脚本?

如果你是Python或Maxscript的新手,你现在可以跟着这篇文章开始做一些代码了,本文将让我们从非常基本的东西开始学习。 如何在3dmax中获取选定的节点并打印出它们的名称?所有场景对象如何?我们直接看代码: import MaxP…

CentOS虚拟机重置账号密码

虚拟机忘记密码了 一般来说,虚拟机的账号密码,工作中都会有文档记录,如果忘记了可以查看文档。但是也有特例,虚拟机的密码没有记录到文档中,尝试了很多次依然登录失败,这时候就只能重置账号密码了。 1.重…

OpenCV快速入门:图像分析——傅里叶变换、积分图像

文章目录 前言一、傅里叶变换1.1 离散傅里叶变换1.1.1 离散傅里叶变换原理1.1.2 离散傅里叶变换公式1.1.3 代码实现1.1.4 cv2.dft 函数解析 1.2 傅里叶变换进行卷积1.2.1 傅里叶变换卷积原理1.2.2 傅里叶变换卷积公式1.2.3 代码实现1.2.4 cv2.mulSpectrums 函数解析 1.3 离散余…

【开源】基于Vue.js的天然气工程运维系统的设计和实现

项目编号: S 022 ,文末获取源码。 \color{red}{项目编号:S022,文末获取源码。} 项目编号:S022,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统角色分类2.2 核心功能2.2.1 流程…