CN109460529A - 一种基于iframe的前端微服务模块通信方法 - Google Patents
一种基于iframe的前端微服务模块通信方法 Download PDFInfo
- Publication number
- CN109460529A CN109460529A CN201811195560.1A CN201811195560A CN109460529A CN 109460529 A CN109460529 A CN 109460529A CN 201811195560 A CN201811195560 A CN 201811195560A CN 109460529 A CN109460529 A CN 109460529A
- Authority
- CN
- China
- Prior art keywords
- module
- father
- message
- request
- type
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Communication Control (AREA)
Abstract
本发明涉及HTML标签技术，旨在提供一种基于iframe的前端微服务模块通信方法。是在父模块通过iframe标签嵌入多个微服务子模块，父模块与微服务子模块之间的通信方法包括：子模块根据通信规则建立请求报文，向父模块发送通信请求；父子模块建立事件监听，用来捕获父子模块之间的通信请求；父模块获取来自子模块的消息请求后，先比对微服务注册表，确认消息来源；然后，根据不同消息类型查询类型处理；子模块建立事件监听，用来捕获父模块回传的消息。本发明通过对父子模块通信进行有效的规范，可实现对多个微服务模块的统一维护以及提高扩展功能的通用性。
Description
技术领域
本发明涉及HTML标签技术，特别涉及基于iframe的前端微服务模块通信方法。
背景技术
IFRAME是HTML标签，就是文档中的文档，可视为浮动的框架(FRAME)。frames集合提供了对IFRAME内容的访问。iframe实现无刷新上传的原理：利用form的target属性，把数据提交到页面中一个iframe上(通常为隐藏的)；isContentEditable获取表明用户是否可编辑对象内容的值，MARGINWIDTH marginWidth设置或获取显示框架中文本之前的左右边距宽度，tagUrn设置或获取在命名空间声明中指定的统一资源名称(URN)。不同框架的微服务同时嵌入页面应用，在父子模块数据交互时需要制定统一的通信规则，来提高父模块对于微服务功能的可扩展性以及代码可维护性。
单一的框架已无法应对现代网页应用的开发，需要将一个大的项目拆分成多个微服务功能模块并让它们独立运行，而这些微服务可以使用不同的框架实现。通过将微服务包装到Iframes中，然后利用一些库和window.postMessageAPI来进行交互，实现应用嵌入多个微服务。同时，通过制定特定的通信规则，比如规定数据报文格式、消息请求来源、类型等，来保证父子模块的有效数据交互与数据安全以及提高父模块对于微服务功能的可扩展性以及代码可维护性。
目前通常的做法是，通过在父模块创建iframe标签嵌入微服务模块，调用window.postMessageAPI传递单一数据类型进行数据交互。但是当嵌入多个微服务时，由于未对消息请求进行分类、以及数据报文格式进行统一规范，导致父模块对于微服务的可扩展功能较差，同时父模块需要对于每一个微服务依赖的功能进行单独维护。
发明内容
本发明要解决的技术问题是，克服现有技术中的不足，提供一种基于iframe的前端微服务模块通信方法。
为解决上述技术问题，本发明采用的解决方案是：
提供一种基于iframe的前端微服务模块通信方法，在父模块通过iframe标签嵌入多个微服务子模块，父模块与微服务子模块之间的通信方法包括以下步骤：
(1)子模块根据通信规则建立请求报文，通过调用window.parent.postMessage方法向父模块发送通信请求；
(2)父子模块通过window.addEventListener方法建立事件监听，用来捕获父子模块之间的通信请求；
(3)父模块获取来自子模块的消息请求后，先根据iframeOrigin比对微服务注册表，确认消息来源；然后，根据不同消息类型查询类型处理分支：
若消息请求为指令类型，则根据指令名称调用父模块对应方法；
若消息请求为提示类型，则根据提示类型显示相应提示内容；
若消息请求为交互式类型，则根据交互类型解析交互数据，处理完成后根据通信规则封装回传数据报文，通过解析DOM节点document.getElementById(iframeOrigin)定位到目标模块，利用contentWindow.postMessage方法，向对应子模块返回处理结果；
(4)子模块通过window.addEventListener方法建立事件监听，用来捕获父模块回传的消息。
本发明中，所述步骤(1)中，当子模块向父模块发送消息请求时，数据请求报文包括消息请求类型、消息请求来源和具体请求数据结构体；其中，消息请求类型分为实现父模块方法调用的指令类消息、通知父模块显示消息提示的提示类消息和向父模块传递数据并传递回至请求来源的交互式消息；消息请求来源用于消息回传定位；具体请求数据结构体分为需要传递指令名称的指令类型、提示类型与内容的提示类型，包括交互类型和交互数据的交互式类型。
本发明中，所述步骤(3)中，当父模块向对应子模块返回处理结果时，数据请求报文包括交互请求类型和返回的具体数据。
与现有技术相比，本发明的技术效果是：
本发明通过对父子模块通信进行有效的规范，可实现对多个微服务模块的统一维护以及提高扩展功能的通用性。
附图说明
图1为项目基础结构图。
图2为子模块数据请求报文格式示意图。
图3为父模块返回报文结构示意图。
图4为父子模块通信流程图。
具体实施方式
下面结合附图，对本发明的具体实施方式进行详细描述。
首先需要说明的是，本发明涉及HTML标签技术，是计算机技术在网络通信技术领域的一种应用。在本发明的实现过程中，会涉及到多个软件功能模块的应用。申请人认为，如在仔细阅读申请文件、准确理解本发明的实现原理和发明目的以后，在结合现有公知技术的情况下，本领域技术人员完全可以运用其掌握的软件编程技能实现本发明。前述软件功能模块包括但不限于：父模块、微服务子模块等，凡本发明申请文件提及的均属此范畴，申请人不再一一列举。
本发明实现的项目基础如图1所示，是在父模块通过iframe标签嵌入多个微服务子模块。
1、当子模块向父模块发送消息请求时，需要遵循如图2的数据请求报文格式：
messageType:消息请求类型，
指令类消息，实现父模块方法调用
提示类消息，通知父模块显示消息提示
交互式消息，向父模块传递数据，父模块处理后传递回请求来源
iframeOrigin:消息请求来源，用于消息回传定位
data:具体请求数据结构体
指令类型，需要传递指令名称，name属性
提示类型，提示类型infoType，提示内容infoContent
交互式类型,交互类型type,交互数据data
2、在消息请求为交互式类型的情况下，当父模块向子模块返回消息请求时，需要遵循如图3的数据请求报文格式：
Type:交互请求类型，子模块中的监听器根据该类型去执行相应的处理流程
ResultData:返回的具体数据，类型为json体
3、在本发明所述基于iframe的前端微服务模块通信方法中，父模块与微服务子模块之间的通信方法包括以下步骤：
(1)子模块根据通信规则建立请求报文，通过调用window.parent.postMessage方法向父模块发送通信请求；
(2)父子模块通过window.addEventListener方法建立事件监听，用来捕获父子模块之间的通信请求；
(3)父模块获取来自子模块的消息请求后，先根据iframeOrigin比对微服务注册表，确认消息来源；然后，根据不同消息类型查询类型处理分支：
若消息请求为指令类型，则根据指令名称调用父模块对应方法；
若消息请求为提示类型，则根据提示类型显示相应提示内容；
若消息请求为交互式类型，则根据交互类型解析交互数据，处理完成后根据通信规则封装回传数据报文，通过解析DOM节点document.getElementById定位到目标模块，利用contentWindow.postMessage方法，向对应子模块返回处理结果；
(4)子模块通过window.addEventListener方法建立事件监听，用来捕获父模块回传的消息。
下面通过一个实例，对本发明具体实现方式进行举例说明：
实例背景：任务中心微服务子模块进行用户任务结算，并通知父模块进行信息交互展示。
具体过程：
1、首先在父模块主文件中引入任务中心微服务子模块
2、添加message事件监听器，用于捕获子模块发送的请求，并进行数据解析：
3、任务中心微服务子模块执行完任务结算方法后，根据通信规则生成相应格式的数据报文：
向父模块发送数据包：
Claims (3)
1.一种基于iframe的前端微服务模块通信方法，其特征在于，在父模块通过iframe标签嵌入多个微服务子模块，父模块与微服务子模块之间的通信方法包括以下步骤：
(1)子模块根据通信规则建立请求报文，通过调用window.parent.postMessage方法向父模块发送通信请求；
(2)父子模块通过window.addEventListener方法建立事件监听，用来捕获父子模块之间的通信请求；
(3)父模块获取来自子模块的消息请求后，先根据iframeOrigin比对微服务注册表，确认消息来源；然后，根据不同消息类型查询类型处理分支：
若消息请求为指令类型，则根据指令名称调用父模块对应方法；
若消息请求为提示类型，则根据提示类型显示相应提示内容；
若消息请求为交互式类型，则根据交互类型解析交互数据，处理完成后根据通信规则封装回传数据报文，通过解析DOM节点document.getElementById定位到目标模块，利用contentWindow.postMessage方法，向对应子模块返回处理结果；
(4)子模块通过window.addEventListener方法建立事件监听，用来捕获父模块回传的消息。
2.根据权利要求1所述的方法，其特征在于，所述步骤(1)中，当子模块向父模块发送消息请求时，数据请求报文包括消息请求类型、消息请求来源和具体请求数据结构体；其中，消息请求类型分为实现父模块方法调用的指令类消息、通知父模块显示消息提示的提示类消息和向父模块传递数据并传递回至请求来源的交互式消息；消息请求来源用于消息回传定位；具体请求数据结构体分为需要传递指令名称的指令类型、提示类型与内容的提示类型，包括交互类型和交互数据的交互式类型。
3.根据权利要求1所述的方法，其特征在于，所述步骤(3)中，当父模块向对应子模块返回处理结果时，数据请求报文包括交互请求类型和返回的具体数据。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811195560.1A CN109460529A (zh) | 2018-10-15 | 2018-10-15 | 一种基于iframe的前端微服务模块通信方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811195560.1A CN109460529A (zh) | 2018-10-15 | 2018-10-15 | 一种基于iframe的前端微服务模块通信方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109460529A true CN109460529A (zh) | 2019-03-12 |
Family
ID=65607624
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811195560.1A Pending CN109460529A (zh) | 2018-10-15 | 2018-10-15 | 一种基于iframe的前端微服务模块通信方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109460529A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111240863A (zh) * | 2020-01-10 | 2020-06-05 | 无锡华云数据技术服务有限公司 | 数据通信方法、装置、微前端系统及存储介质 |
| CN112217671A (zh) * | 2020-09-30 | 2021-01-12 | 青岛海信网络科技股份有限公司 | 基于拆分部署的前端微服务进行界面显示的方法及设备 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120198029A1 (en) * | 2011-02-01 | 2012-08-02 | Ebay Inc. | Commerce applications: data handshake between an on-line service and a third-party partner |
| WO2017061682A1 (en) * | 2015-10-08 | 2017-04-13 | Lg Electronics Inc. | Mobile terminal and control method thereof |
| CN108153779A (zh) * | 2016-12-05 | 2018-06-12 | 阿里巴巴集团控股有限公司 | 页面数据投放信息处理方法及装置 |
| CN108306918A (zh) * | 2017-01-13 | 2018-07-20 | 南京邮电大学盐城大数据研究院有限公司 | 一种基于程序动态分析的网站访问信息自动获取方法 |
-
2018
- 2018-10-15 CN CN201811195560.1A patent/CN109460529A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120198029A1 (en) * | 2011-02-01 | 2012-08-02 | Ebay Inc. | Commerce applications: data handshake between an on-line service and a third-party partner |
| WO2017061682A1 (en) * | 2015-10-08 | 2017-04-13 | Lg Electronics Inc. | Mobile terminal and control method thereof |
| CN108153779A (zh) * | 2016-12-05 | 2018-06-12 | 阿里巴巴集团控股有限公司 | 页面数据投放信息处理方法及装置 |
| CN108306918A (zh) * | 2017-01-13 | 2018-07-20 | 南京邮电大学盐城大数据研究院有限公司 | 一种基于程序动态分析的网站访问信息自动获取方法 |
Non-Patent Citations (2)
| Title |
|---|
| FENG_JH0001: "记一次：iframe嵌套网页，利用window.postMessage()实现子父窗口相互传值", 《HTTPS://BLOG.CSDN.NET/M0_37461510/ARTICLE/DETAILS/82620833》 * |
| WEIXIN_33802505: "通用Iframe跨域通信库实现", 《HTTPS://BLOG.CSDN.NET/WEIXIN_33802505/ARTICLE/DETAILS/90251532》 * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111240863A (zh) * | 2020-01-10 | 2020-06-05 | 无锡华云数据技术服务有限公司 | 数据通信方法、装置、微前端系统及存储介质 |
| CN111240863B (zh) * | 2020-01-10 | 2024-02-06 | 无锡华云数据技术服务有限公司 | 数据通信方法、装置、微前端系统及存储介质 |
| CN112217671A (zh) * | 2020-09-30 | 2021-01-12 | 青岛海信网络科技股份有限公司 | 基于拆分部署的前端微服务进行界面显示的方法及设备 |
| CN112217671B (zh) * | 2020-09-30 | 2022-12-27 | 青岛海信网络科技股份有限公司 | 基于拆分部署的前端微服务进行界面显示的方法及设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20080071922A1 (en) | Methods, systems, and computer program products to transparently dispatch requests to remote resources in a multiple application server environment | |
| GB0023169D0 (en) | Message parsing in message processing systems | |
| CN102314469A (zh) | 一种实现跨域请求回调的方法 | |
| CN103870274A (zh) | 一种基于webservice技术下实现异构系统间数据交互的可视化开发组件 | |
| CN110232091B (zh) | 用于同步数据的方法、系统和装置 | |
| CN109343975B (zh) | 用于页面间异步通信的方法和装置 | |
| CN110222114B (zh) | 数据库中数据双向同步的方法及设备 | |
| CN107169069B (zh) | 分布式分级抽取多应用方法和数据抽取应用器 | |
| CN110213240A (zh) | 一种路由自适应的电力调度系统及其跨区服务调用方法 | |
| CN106326017A (zh) | 基于Annotation使用的调用链的实现系统 | |
| CN105743955B (zh) | 一种扩展JavaScript对象方法 | |
| CN109460529A (zh) | 一种基于iframe的前端微服务模块通信方法 | |
| US11347620B2 (en) | Parsing hierarchical session log data for search and analytics | |
| ATE413745T1 (de) | Alarm logfile meldung mittels xml tagging | |
| CN107635001A (zh) | Web脚本异常处理方法和装置 | |
| CN106201808A (zh) | 一种服务器端的自动化接口测试方法及系统 | |
| CN105808587A (zh) | 在网页中嵌入信息的方法、网关设备及系统 | |
| CN104461537B (zh) | 一种基于浏览器内核的多业务集成系统 | |
| US20090287845A1 (en) | Mediator with interleaved static and dynamic routing | |
| MX2021011772A (es) | Servicio web universal para objetos de formacion de imagen digital y comunicaciones en medicina (dicom). | |
| CN103944956B (zh) | 网络服务代理方法 | |
| CN105808261B (zh) | 一种基于事件驱动的组件方法 | |
| CN109683875B (zh) | 分布式环境下mvc模式的应用框架系统及其方法 | |
| US9027152B2 (en) | Device for right managing web data, recording medium for performing method for right managing web data on computer, and device and method for providing right management information | |
| CN102663063B (zh) | 基于xslt的多种用户平台通用信息展示系统及方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190312 |