在web端界面使用iframe技术实现界面插件的方法技术

本发明专利技术涉及一种在web端界面使用iframe技术实现界面插件的方法，该方法利用server端作为中间层，分别和web端的不同模块进行数据交互，从而实现不同iframe模块之间的数据交互。该技术方案能有效解决不同页面作为web界面插件时，不同iframe模块之间的数据交互问题。

The Method of Implementing Interface Plug-in Using IFrame Technology in Web Interface

【技术实现步骤摘要】
在web端界面使用iframe技术实现界面插件的方法
本专利技术涉及一种车体表面防护附件，具体涉及一种在web端界面使用iframe技术实现界面插件的方法。
技术介绍
通常情况下，一个B/S架构的软件，分为Browser端和Server端，其中，Browser端运行于客户端的浏览器中，Server端运行于服务器中。在Browser端的web界面通常采用来源相同的页面组合而成，各个界面模块中，如果需要数据交互，可以直接通过顶层window对象，或者web端数据总线类框架，或者全局数据总线，甚至组件之间直接调用数据等等方式进行组件数据交换。如果需要将来源不同的web页面集成到一个页面中，可以采用iframe技术来集成不同页面，但是iframe技术会导致各个页面之间无法直接进行数据交互。
技术实现思路
本专利技术的目的是提供一种在web端界面使用iframe技术实现界面插件的方法，解决了将不同页面作为web界面插件时，不同iframe模块之间的数据交互问题。本专利技术所采用的技术方案为：在web端界面使用iframe技术实现界面插件的方法，其特征在于：该方法利用server端作为中间层，分别和web端的不同模块进行数据交互，从而实现不同iframe模块之间的数据交互。具体包括以下步骤：在webUI端，使用iframe技术将不同来源的页面集成在同一个页面中，Iframe1下为来源地址1中的页面webPage1，iframe2下为来源地址2中的页面webPage2；webPage1向自己的server端即Server1发送数据，接口采用http接口；Server1收到数据后发送到server2；server2是webPage2的对应的server端，然后server2通过webSocket将数据推送到webPage2中，实现webpage1到webpage2的数据传输；当webPage2需要向webPage1传输数据时，采用相同的流程。Server端根据client端的数据要求采用适宜的交互方式向client端推送数据。client主动发送或请求数据，不会被动接收数据时，采用http接口，client通过http的get或post方法向server端请求数据或者发送数据，server端采用http的交互方式。Client需要被动接收数据时，采用websocket接口，页面生成时，即创建webSocket连接，并保持数据通道畅通，Server端向client端推送数据，server端采用webSocket的交互方式。本专利技术具有以下优点：本专利技术涉及的方法利用server端作为中间层，分别和web端的不同模块进行数据交互，对于基于iframe技术集成的不同页面，可以进行数据交互，简单易行，有效解决了不同页面作为web界面插件时，不同iframe模块之间的数据交互问题。附图说明图1为本专利技术原理示意图。图2为前端页面结构图。图3为数据通道图。具体实施方式下面结合具体实施方式对本专利技术进行详细的说明。Web界面使用iframe将多个不同地址的页面集成在一个页面下时，在不同iframe模块之间无法进行数据交互，本专利技术涉及的在web端界面使用iframe技术实现界面插件的方法，利用server端作为中间层，分别和web端的不同模块进行数据交互，从而实现不同iframe模块之间的数据交互。具体包括以下步骤：在webUI端，使用iframe技术将不同来源的页面集成在同一个页面中，Iframe1下为来源地址1中的页面webPage1，iframe2下为来源地址2中的页面webPage2；webPage1向自己的server端即Server1发送数据，接口采用http接口；Server1收到数据后发送到server2；server2是webPage2的对应的server端，然后server2通过webSocket将数据推送到webPage2中，实现webpage1到webpage2的数据传输；当webPage2需要向webPage1传输数据时，采用相同的流程。Server端根据client端的数据要求采用适宜的交互方式向client端推送数据。1）client主动发送或请求数据，不会被动接收数据时，采用http接口，client通过http的get或post方法向server端请求数据或者发送数据，server端采用http的交互方式。2）Client需要被动接收数据时，采用websocket接口，页面生成时，即创建webSocket连接，并保持数据通道畅通，Server端向client端推送数据，server端采用webSocket的交互方式。本专利技术的内容不限于实施例所列举，本领域普通技术人员通过阅读本专利技术说明书而对本专利技术技术方案采取的任何等效的变换，均为本专利技术的权利要求所涵盖。本文档来自技高网...

【技术保护点】
1.在web端界面使用iframe技术实现界面插件的方法，其特征在于：该方法利用server端作为中间层，分别和web端的不同模块进行数据交互，从而实现不同iframe模块之间的数据交互。

【技术特征摘要】
1.在web端界面使用iframe技术实现界面插件的方法，其特征在于：该方法利用server端作为中间层，分别和web端的不同模块进行数据交互，从而实现不同iframe模块之间的数据交互。2.根据权利要求1所述的在web端界面使用iframe技术实现界面插件的方法，其特征在于：具体包括以下步骤：在webUI端，使用iframe技术将不同来源的页面集成在同一个页面中，Iframe1下为来源地址1中的页面webPage1，iframe2下为来源地址2中的页面webPage2；webPage1向自己的server端即Server1发送数据，接口采用http接口；Server1收到数据后发送到server2；server2是webPage2的对应的server端，然后server2通过webSocket将数据推送到webPage2中，实现webpage1到webpage2的数据传输；当webPage2需...

【专利技术属性】
技术研发人员：任硕，
申请(专利权)人：西安航天恒星科技实业集团有限公司，
类型：发明
国别省市：陕西,61