js 如何封装一个iframe通讯的sdk

news/2024/7/21 10:41:52/文章来源:https://blog.csdn.net/ivan5277/article/details/139290855

在JavaScript中,封装一个用于iframe间通信的SDK,可以利用postMessagemessage事件监听来实现跨域通信。以下是一个简单的示例,展示如何封装这样一个SDK:

步骤 1: 创建SDK文件

首先,创建一个名为IframeCommunicator.js的文件,用于存放你的SDK代码。

步骤 2: 实现SDK逻辑

IframeCommunicator.js中,你可以这样实现:

class IframeCommunicator {constructor(options) {this.origin = options.origin || '*'; // 默认接受所有源,实际使用时应具体指定this.targetOrigin = options.targetOrigin; // 如果已知目标iframe的源,则设置它window.addEventListener('message', this._onMessage.bind(this), false);}_onMessage(event) {// 确保消息来自允许的源if (this.origin === '*' || event.origin === this.origin) {// 根据需要处理消息,这里简单触发一个回调if (typeof this.messageCallback === 'function') {this.messageCallback(event.data, event.origin);}}}sendMessage(message, targetOrigin = this.targetOrigin) {// 发送消息到iframeif (targetOrigin) {parent.postMessage(message, targetOrigin);} else {console.warn('Target origin not specified. Message not sent.');}}// 设置消息接收回调onMessage(callback) {this.messageCallback = callback;}
}// 导出SDK,以便其他模块使用
export default IframeCommunicator;

步骤 3: 使用SDK

在主页面或iframe页面中,你可以像下面这样使用这个SDK:

主页面使用示例:
import IframeCommunicator from './IframeCommunicator.js';const communicator = new IframeCommunicator({targetOrigin: 'https://example.com' // 设置目标iframe的源
});// 设置消息接收处理函数
communicator.onMessage(data => {console.log('Received message:', data);
});// 向iframe发送消息
communicator.sendMessage({ action: 'getUserData' });
iframe页面使用示例:

同样地,如果需要在iframe内与父页面通讯,也可以使用相同的SDK,但需调整targetOrigin为父页面的源。

注意事项

  • 确保指定正确的targetOrigin以防止安全风险。
  • 在实际应用中,可能需要根据业务需求细化消息处理逻辑,比如通过检查消息中的特定字段来决定如何处理。
  • 考虑到安全性和性能,最好在不再需要监听消息时移除事件监听器。

这样,你就成功封装了一个基本的iframe通信SDK,可以提供给其他开发者方便地在他们的项目中实现iframe间的跨域通信。

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

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

相关文章

tcpdump源码分析

进入tcpdump.c(函数入口)之前,先看一些头文件netdissect.h里定义了一个数据结构struct netdissect_options来描述tcdpump支持的所有参数动作,每一个参数有对应的flag, 在tcpdump 的main 里面, 会根据用户的传入的参数来…

【大数据】Hadoop 2.X和1.X升级优化对比

目录 1.前言 2.hadoop 1.X的缺点和优化方向 3.解决NameNode的局限性 3.1.Hadoop HA 3.2.Haddop federation 4.yarn 5.周边组件 1.前言 本文是作者大数据系列中的一文,专栏地址: https://blog.csdn.net/joker_zjn/category_12631789.html?spm10…

DNS设置(linux)

1.配置dns需要现在/etc/sysconfig/network-scripts/目录下的ifcfg-ens33(后面数字也可能是其他的)中配置DNS 2.编辑/etc/resolv.conf文件,将上面网卡中加的dns服务器ip添加到此文件 vi /etc/resolv.conf重启网络配置 service network restart常用的dns的ip 国内…

科学技术创新杂志科学技术创新杂志社科学技术创新编辑部2024年第10期目录

科技创新 单桩穿越岩溶发育地层力学特征与溶洞处置措施研究 刘飞; 1-7《科学技术创新》投稿:cnqikantg126.com 基于多目标优化的中低压配电网电力规划研究 向星山;杨承俊;张寒月; 8-11 激光雷达测绘技术在工程测绘中的应用研究 张军伟;闫宏昌; 12-15 …

无线麦克风什么牌子的音质效果好?一文读懂无线领夹麦克风哪款好

​在当今的数字时代,无线技术已经深入到我们生活的方方面面,无线领夹麦克风便是其中的佼佼者。它们为讲者、表演者以及那些需要在移动中讲话的人们提供了解放双手和自由移动的可能。本文旨在探讨无线领夹麦克风的多种用途,以及如何挑选最适合…

【UnityShader入门精要学习笔记】第十五章 使用噪声

本系列为作者学习UnityShader入门精要而作的笔记,内容将包括: 书本中句子照抄 个人批注项目源码一堆新手会犯的错误潜在的太监断更,有始无终 我的GitHub仓库 总之适用于同样开始学习Shader的同学们进行有取舍的参考。 文章目录 使用噪声上…

理解多线程看这一篇就够了

一、基本概念与关系 程序 程序是含有指令和数据的文件,静态地存储在磁盘等存储设备上。它是软件的实体,但未被激活。 进程 进程是程序的一次执行过程,是系统运行程序的基本单位。当程序被操作系统加载并执行时,就成为一个进程&a…

gpt-4o继续迭代考场安排程序 一键生成考场清单

接上两篇gpt-4o考场安排-CSDN博客,考场分层次安排,最终exe版-CSDN博客 当然你也可以只看这一篇。 今天又添加了以下功能,程序见后。 1、自动分页,每个考场打印一页 2、添加了打印试场单页眉 3、添加了页脚 第X页,…

【优选算法】分治 {三分快排:三指针优化,随机选key,快速选择算法;归并排序:统计数组中的逆序对,统计数组中的翻转对;相关编程题解析}

一、经验总结 1.1 三分快排 优化一:三指针优化 之前学习的快速排序无法妥善处理相等或重复序列的排序问题(有序且三数取中无效),使快速排序的效率无法达到最优。 为了解决重复序列的问题,我们将原先的双指针法&…

ModuleNotFoundError: No module named ‘qcloud_cos‘

这个错误表示Python无法找到名为qcloud_cos的模块。qcloud_cos是腾讯云提供的一个Python SDK,用于与腾讯云对象存储(COS)服务进行交互。 使用pip安装qcloud_cos报以下错误 解决办法 pip3 install cos-python-sdk-v5

HR人才测评,想象力维度分析(大五人格测试)

想象力维度(高得分者)性格特征 开放性人格的人通常富有想象力。想象力是一种可贵的天赋,通常在孩童时期人们都会充满想象力,但是随着渐渐长大,我们的想象力也会被时光的棱角磨平。 但开放性人格的人并非如此&#x…

LLM - 模型下载与 git-lfs 安装

目录 一.引言 二.安装 git lfs 1.使用 apt-get 安装 2.使用 Brew 安装 3.LFS 验证 三.总结 一.引言 在 HuggingFace 上下载模型时提供一个 git clone 的指令,执行后可以下载对应模型的模型文件: 但是本机还没有 git lfs 命令: git: lfs is not a git comman…

热搜第一!道歉,永久解约

5月27日,#茉酸奶换标签续命水果馊了才肯扔#登上热搜,多个相关话题引发热议。5月27日,茉酸奶通过官方账号发布致歉声明,承认使用过期原料。原文如下:针对《新京报》报道的“茉酸奶北京石景山万达店、北京伊藤洋华堂店、北京华宇时尚购物中心店、华熙 LIVE五棵松店使用过保质…

搜维尔科技:Movella Xsens用于动画,CG,短视频制作案例

用户名称 广州百漫文化传播有限公司 应用场景 基于Xsens MVN Link 动作捕捉系统的动画制作、CG制作、短视频制作、快速动画MAYA插件、影视动漫实时合成预渲染。 现场照片 《西行纪》内容简介:在远古神明的年代,世间存在着天众、龙众、阿修罗等八部众…

uniapp一些问题解决

1.按钮边框如何去除? 参考博主:微信小程序按钮去不掉边框_微信小程序button去掉边框-CSDN博客文章浏览阅读1k次。最近在学uni-app,顺便自己写个小程序。左上角放了个button,可边框怎么也去不掉…原来微信小程序的按钮要去掉边框要…

量化交易:如何在QMT中运行Python策略并在VSCode中高效调试?

哈喽,大家好,我是木头左! 为何选择QMT和VSCode进行量化策略开发? 在量化交易的世界里,选择正确的工具与拥有优秀的策略同等重要。调用用Visual Studio Code(简称VSCode)或pycharm,方…

Midjourne进阶篇 | 个性化潮玩

当Midjourney遇上潮玩,你想不到的惊艳! 前言盲盒魔法公式**01.嘻哈潮玩****02.荧光猫少女****03.古风剑侠****04.音乐节少年****05.Q版古风少女** 总结 前言 以前,制作盲盒需要专业盲盒设计师完成,对于大部分人来说,这…

快团团供货大团长如何打印电子面单?

一、功能说明 快团团打单平台是目前唯一一个服务于快团团团长的打单发货工具,免费提供给团长使用。可帮助团长快速打印面单、分拣包裹、完成发货。 目前快团团打单平台已支持大批量打印快递单、自定义快递面单、自动发货、绑定拼多多电子面单账号等功能&#xff0c…

福建聚鼎科技:装饰画生意到底有没有前景

在当今社会,随着人们生活水平的提高和审美需求的多样化,家居装饰行业迎来了新的发展机遇。装饰画作为家居装饰的重要组成部分,其市场前景备受关注。那么,装饰画生意到底有没有前景呢? 从市场需求的角度来看,装饰画市场…

【408真题】2009-24

“接”是针对题目进行必要的分析,比较简略; “化”是对题目中所涉及到的知识点进行详细解释; “发”是对此题型的解题套路总结,并结合历年真题或者典型例题进行运用。 涉及到的知识全部来源于王道各科教材(2025版&…