[發(fā)明專利]在web端界面使用iframe技術(shù)實現(xiàn)界面插件的方法

在審

• 申請?zhí)枺?/td>: 201910316616.2
• 申請日: 2019-04-19
• 公開（公告）號: CN110083403A
• 公開（公告）日: 2019-08-02
• 發(fā)明（設(shè)計）人: 任碩
• 申請（專利權(quán)）人: 西安航天恒星科技實業(yè)（集團）有限公司
• 主分類號: G06F9/445
• 分類號: G06F9/445;H04L29/08
• 代理公司: 西安新思維專利商標(biāo)事務(wù)所有限公司 61114
• 代理人: 李罡

本發(fā)明涉及一種在web端界面使用iframe技術(shù)實現(xiàn)界面插件的方法，該方法利用server端作為中間層，分別和web端的不同模塊進行數(shù)據(jù)交互，從而實現(xiàn)不同iframe模塊之間的數(shù)據(jù)交互。該技術(shù)方案能有效解決不同頁面作為web界面插件時，不同iframe模塊之間的數(shù)據(jù)交互問題。

技術(shù)領(lǐng)域

本發(fā)明涉及一種車體表面防護附件，具體涉及一種在web端界面使用iframe技術(shù)實現(xiàn)界面插件的方法。

背景技術(shù)

通常情況下，一個B/S架構(gòu)的軟件，分為Browser端和Server端，其中，Browser端運行于客戶端的瀏覽器中，Server端運行于服務(wù)器中。在Browser端的web界面通常采用來源相同的頁面組合而成，各個界面模塊中，如果需要數(shù)據(jù)交互，可以直接通過頂層window對象，或者web端數(shù)據(jù)總線類框架，或者全局數(shù)據(jù)總線，甚至組件之間直接調(diào)用數(shù)據(jù)等等方式進行組件數(shù)據(jù)交換。

如果需要將來源不同的web頁面集成到一個頁面中，可以采用iframe技術(shù)來集成不同頁面，但是iframe技術(shù)會導(dǎo)致各個頁面之間無法直接進行數(shù)據(jù)交互。

發(fā)明內(nèi)容

本發(fā)明的目的是提供一種在web端界面使用iframe技術(shù)實現(xiàn)界面插件的方法，解決了將不同頁面作為web界面插件時，不同iframe模塊之間的數(shù)據(jù)交互問題。

本發(fā)明所采用的技術(shù)方案為：

在web端界面使用iframe技術(shù)實現(xiàn)界面插件的方法，其特征在于：

該方法利用server端作為中間層，分別和web端的不同模塊進行數(shù)據(jù)交互，從而實現(xiàn)不同iframe模塊之間的數(shù)據(jù)交互。

具體包括以下步驟：

在webUI端，使用iframe技術(shù)將不同來源的頁面集成在同一個頁面中，Iframe1下為來源地址1中的頁面webPage1，iframe2下為來源地址2中的頁面webPage2；

webPage1向自己的server端即Server1發(fā)送數(shù)據(jù)，接口采用http接口；Server1收到數(shù)據(jù)后發(fā)送到server2；server2是webPage2的對應(yīng)的server端，然后server2通過webSocket將數(shù)據(jù)推送到webPage2中，實現(xiàn)webpage1到webpage2的數(shù)據(jù)傳輸；

當(dāng)webPage2需要向webPage1傳輸數(shù)據(jù)時，采用相同的流程。

Server端根據(jù)client端的數(shù)據(jù)要求采用適宜的交互方式向client端推送數(shù)據(jù)。

client主動發(fā)送或請求數(shù)據(jù)，不會被動接收數(shù)據(jù)時，采用http接口，client通過http的get或post方法向server端請求數(shù)據(jù)或者發(fā)送數(shù)據(jù)，server端采用http的交互方式。

Client需要被動接收數(shù)據(jù)時，采用websocket接口，頁面生成時，即創(chuàng)建webSocket連接，并保持數(shù)據(jù)通道暢通，Server端向client端推送數(shù)據(jù)，server端采用webSocket的交互方式。

本發(fā)明具有以下優(yōu)點：

本發(fā)明涉及的方法利用server端作為中間層，分別和web端的不同模塊進行數(shù)據(jù)交互，對于基于iframe技術(shù)集成的不同頁面，可以進行數(shù)據(jù)交互，簡單易行，有效解決了不同頁面作為web界面插件時，不同iframe模塊之間的數(shù)據(jù)交互問題。

附圖說明

圖1為本發(fā)明原理示意圖。

圖2為前端頁面結(jié)構(gòu)圖。

圖3為數(shù)據(jù)通道圖。

具體實施方式