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

Abstract

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

Description

在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的交互方式。

本发明的内容不限于实施例所列举，本领域普通技术人员通过阅读本发明说明书而对本发明技术方案采取的任何等效的变换，均为本发明的权利要求所涵盖。

Claims (5)

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需要向webPage1传输数据时，采用相同的流程。

3.根据权利要求2所述的在web端界面使用iframe技术实现界面插件的方法，其特征在于：

Server端根据client端的数据要求采用适宜的交互方式向client端推送数据。

4.根据权利要求3所述的在web端界面使用iframe技术实现界面插件的方法，其特征在于：

client主动发送或请求数据，不会被动接收数据时，采用http接口，client通过http的get或post方法向server端请求数据或者发送数据，server端采用http的交互方式。

5.根据权利要求4所述的在web端界面使用iframe技术实现界面插件的方法，其特征在于：

Client需要被动接收数据时，采用websocket接口，页面生成时，即创建webSocket连接，并保持数据通道畅通，Server端向client端推送数据，server端采用webSocket的交互方式。