瀏覽器與web前端通信的方法、web前端及系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及圖片處理技術(shù)領(lǐng)域，尤其涉及一種瀏覽器與web前端通信的方法、web如端及系統(tǒng)。
【背景技術(shù)】
[0002]目前，運行于1s系統(tǒng)之上的瀏覽器都是基于safari內(nèi)核，web前端無法直接使用瀏覽器客戶端提供的API，即web前端缺少與瀏覽器客戶端主動通信的機制。
[0003]對于瀏覽器客戶端，可以訪問web前端的全局javascript代碼，瀏覽器客戶端訪問web前端的javascript代碼通常采用以下兩種方式JARweb前端傳入的全局函數(shù)名對應(yīng)的函數(shù)，或者執(zhí)行web前端傳入的函數(shù)體。
[0004]但是上述兩種方式都存在嚴重的弊端:第一種方式要求傳入的函數(shù)名需要對應(yīng)一個全局函數(shù)，這種方式對于異步接口來說簡直是災(zāi)難，因為調(diào)用一次API意味著需要生成一個全局變量，這樣不僅會污染命名空間，也會占用內(nèi)存；第二種方式會使傳入的函數(shù)體中的作用域鏈失效，函數(shù)體內(nèi)只能訪問全局變量，this對應(yīng)的是window對象,此時函數(shù)體將無法保留現(xiàn)場，這些潛規(guī)則的存在將會給web前端開發(fā)帶來更大的復(fù)雜度。

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

[0005]本發(fā)明實施例提供一種瀏覽器與web前端通信的方法、web前端及系統(tǒng)，旨在實現(xiàn)web前端與瀏覽器客戶端之間的有效通信，降低開發(fā)者對API接口的使用成本。
[0006]本發(fā)明實施例提出了一種瀏覽器與web前端通信的方法，包括:
[0007]web前端響應(yīng)接口調(diào)用指令，生成用以標識所述接口調(diào)用指令對應(yīng)請求事件的id ；
[0008]所述web前端根據(jù)所述接口調(diào)用指令，獲取所述請求事件的接口參數(shù)；
[0009]所述web前端將所述請求事件、id以及所述接口參數(shù)存入全局變量命令隊列中；
[0010]所述web前端通過給預(yù)先創(chuàng)建的標簽的設(shè)定屬性賦值的方式，將所述全局變量命令隊列發(fā)送至瀏覽器；
[0011]所述瀏覽器接收到所述全局變量命令隊列后，從所述全局變量命令隊列中讀取所述請求事件、id以及所述接口參數(shù),對所述請求事件進行處理。
[0012]本發(fā)明實施例還提出一種瀏覽器與web前端通信的的系統(tǒng)，包括:瀏覽器和與所述瀏覽器通信連接的web前端；其中:
[0013]所述web前端，用于響應(yīng)接口調(diào)用指令，生成用以標識所述接口調(diào)用指令對應(yīng)請求事件的id ;根據(jù)所述接口調(diào)用指令，獲取所述請求事件的接口參數(shù)；將所述請求事件、id以及所述接口參數(shù)存入全局變量命令隊列中；通過給預(yù)先創(chuàng)建的標簽的設(shè)定屬性賦值的方式，將所述全局變量命令隊列發(fā)送至瀏覽器；
[0014]所述瀏覽器，用于接收到所述全局變量命令隊列后，從所述全局變量命令隊列中讀取所述請求事件、id以及所述接口參數(shù)，對所述請求事件進行處理。
[0015]本發(fā)明實施例還提出一種web前端，包括:
[0016]生成模塊，用于響應(yīng)接口調(diào)用指令，生成用以標識所述接口調(diào)用指令對應(yīng)的請求事件的id ；
[0017]獲取模塊，用于根據(jù)所述接口調(diào)用指令，獲取所述請求事件的接口參數(shù)；
[0018]存儲模塊，用于將所述請求事件、id以及所述接口參數(shù)存入全局變量命令隊列中；
[0019]發(fā)送模塊，用于將所述全局變量命令隊列發(fā)送至瀏覽器；由所述瀏覽器接收到所述全局變量命令隊列后，從所述全局變量命令隊列中讀取所述請求事件、id以及所述接口參數(shù)，對所述請求事件進行處理。
[0020]本發(fā)明實施例提出的一種瀏覽器與web前端通信的方法、web前端及系統(tǒng)，通過創(chuàng)建的iframe標簽,在web前端和瀏覽器客戶端之間建立一座通信的橋梁,通過該橋梁，web前端可以主動和瀏覽器客戶端通信，瀏覽器客戶端也可以主動和web前端通信且保留函數(shù)現(xiàn)場，由此實現(xiàn)了 web前端與瀏覽器客戶端之間的有效通信，降低了開發(fā)者學(xué)習(xí)使用API的成本。
【附圖說明】
[0021]圖1是本發(fā)明實施例涉及的瀏覽器與web前端通信的系統(tǒng)架構(gòu)示意圖；
[0022]圖2是本發(fā)明實施例瀏覽器客戶端與web前端的交互時序示意圖；
[0023]圖3是本發(fā)明實施例方案涉及的web前端硬件運行環(huán)境示意圖；
[0024]圖4是本發(fā)明瀏覽器與web前端通信的方法第一實施例的流程示意圖；
[0025]圖5是本發(fā)明實施例中瀏覽器接收到所述全局變量命令隊列后，從所述全局變量命令隊列中讀取所述請求事件，以及接口參數(shù)，對所述請求事件進行處理的流程示意圖；
[0026]圖6是本發(fā)明瀏覽器與web前端通信的方法第二實施例的流程示意圖；
[0027]圖7是本發(fā)明瀏覽器與web前端通信的方法第三實施例的流程示意圖；
[0028]圖8是本發(fā)明瀏覽器與web前端通信的方法第四實施例的流程示意圖；
[0029]圖9是本發(fā)明瀏覽器與web前端通信的方法第五實施例的流程示意圖；
[0030]圖10是本發(fā)明瀏覽器與web前端通信的方法第六實施例的流程示意圖；
[0031]圖11是本發(fā)明web前端第一實施例的功能模塊示意圖；
[0032]圖12是本發(fā)明web前端第二實施例的功能模塊示意圖。
[0033]為了使本發(fā)明的技術(shù)方案更加清楚、明了，下面將結(jié)合附圖作進一步詳述。
【具體實施方式】
[0034]應(yīng)當(dāng)理解，此處所描述的具體實施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0035]本發(fā)明實施例的主要解決方案是:通過創(chuàng)建的iframe標簽，在web前端和瀏覽器客戶端之間建立一座通信的橋梁，通過該橋梁，web前端可以主動和瀏覽器客戶端通信，瀏覽器客戶端也可以主動和web前端通信且保留函數(shù)現(xiàn)場，由此實現(xiàn)了 web前端與瀏覽器客戶端之間的有效通信，降低了開發(fā)者學(xué)習(xí)使用API的成本。
[0036]如圖1所示，圖1為本發(fā)明實施例方案涉及的瀏覽器與web前端通信的系統(tǒng)架構(gòu)，該系統(tǒng)架構(gòu)包括:瀏覽器客戶端102和與所述瀏覽器客戶端102通信連接的web前端101 ；其中:
[0037]所述web前端1I,用于響應(yīng)接口調(diào)用指令,生成一 i d用以標識所述接口調(diào)用指令對應(yīng)的請求事件；根據(jù)所述接口調(diào)用指令，獲取所述請求事件的接口參數(shù)；將所述請求事件、id以及所述接口參數(shù)存入全局變量命令隊列中；通過給預(yù)先創(chuàng)建的標簽的設(shè)定屬性賦值的方式，將所述全局變量命令隊列發(fā)送至瀏覽器；
[0038]所述瀏覽器，用于接收到所述全局變量命令隊列后，從所述全局變量命令隊列中讀取所述請求事件、id以及所述接口參數(shù)，對所述請求事件進行處理。
[0039]具體地，本實施例瀏覽器客戶端102可以為PC客戶端，也可以為手機、平板電腦等具有網(wǎng)頁瀏覽功能的移動終端。
[0040]以1s系統(tǒng)的手機端為例，由于現(xiàn)有的運行于1s系統(tǒng)之上的瀏覽器都是基于safari內(nèi)核,web前端101無法直接使用瀏覽器客戶端102提供的API,即web前端101缺少與瀏覽器客戶端102主動通信的機制。而對于瀏覽器客戶端102，雖然可以訪問web前端101的全局javascript代碼,但是無法保留函數(shù)現(xiàn)場,給web前端101開發(fā)帶來更大的復(fù)雜度。
[0041]本實施例方案可以在web前端101和瀏覽器客戶端102之間建立一座通信的橋梁，通過該橋梁，web前端101可以主動和瀏覽器客戶端102通信，瀏覽器客戶端102也可以主動和web前端101通信且保留函數(shù)現(xiàn)場，實現(xiàn)web前端101與瀏覽器客戶端102之間的有效通信，降低開發(fā)者學(xué)習(xí)使用API的成本。本實施例瀏覽器客戶端102與web前端101的交互流程如圖2所示。
[0042]具體地,在web前端101創(chuàng)建有一個標簽,本實施例以一個隱藏的iframe標簽進行舉例。web前端101在給這個iframe標簽的src屬性賦值時,會觸發(fā)一個事件，而瀏覽器客戶端102會及時捕獲到這個事件，與此同時，瀏覽器還會截獲iframe標簽的src信息。
[0043]因此,基于此原理,通過創(chuàng)建一個隱藏的iframe的方式可以建立起web前端101和瀏覽器客戶端102之間通信的橋梁。由于web前端101每次創(chuàng)建iframe標簽并賦值時都會觸發(fā)一個事件，所以為了區(qū)分創(chuàng)建iframe標簽是普通的行為還是傳遞一個命令，本實施例定義了 src的特殊格式，并且該src的格式由web前端101與瀏覽器客戶端102協(xié)商產(chǎn)生，以便瀏覽器客戶端102可以及時捕獲到src屬性值。
[0044]本實施例定義src采用以下格式:mtt:service:act1n。
[0045]其中，mtt是字符串常量，service和act1n唯一決定一個命令的行為，service標識大類的行為，act1n標識大類下的細分行為。
[0046]通過這種通信方式，瀏覽器客戶端102對外提供的API都是異步接口，開發(fā)用戶可以傳入service和act1n標識命令的類型,并且以opt1n作為命令參數(shù),sue作為成功回調(diào)函數(shù)，err作為失敗的回調(diào)函數(shù)，由此，定義一個API接口的格式為:
[0047]browserApi (service, act1n, opt1n, sue, err)。
[0048]開發(fā)用戶可以調(diào)用web前端101提供的代碼庫，觸發(fā)對客戶端API接口的調(diào)用。其中，web前端101的代碼庫具體可以為javascript代碼庫。
[0049]web前端101響應(yīng)開發(fā)用戶觸發(fā)的接口調(diào)用指令，會產(chǎn)生一個發(fā)送給瀏覽器客戶端102的請求事件，由此發(fā)起一個命令。
[0050]web前端101對瀏覽器客戶端102發(fā)起一個命令前，會自動生成一個唯一的隨機數(shù)作為id來標識該命令，S卩，生成一 id用以標識所述接口調(diào)用指令對應(yīng)的請求事件。
[0051]此外，web前端101還會根據(jù)所述接口調(diào)用指令，獲取所述請求事件的接口參數(shù)。該接口參數(shù)包括:請求事件的類型和請求事件的命令參數(shù)；其中，請求事件的類型通過上述service和act1n標識；請求事件的命令參數(shù)通過opt1n標識。
[0052]上述獲取的請求事件的接口參數(shù)用于傳送給瀏覽器客戶端102，便于瀏覽器客戶端102對請求事件進行處理。
[0053]在web前端101，還會維護一個命令隊列queue (本實施例稱全局變量命令隊列)來保存這些請求事件(含有請求事件對應(yīng)的id、請求事件的類型和請求事件的命令參數(shù))。
[0054]web前端101之所以通過全局變量命令隊列保存請求事件、id以及接口參數(shù)，是考慮到開發(fā)用戶在一段時間內(nèi)可能會多次調(diào)用瀏覽器客戶端102API接口，而瀏覽器客戶端102不一定能夠及時處理這些請求事件。因此，采用全局變量命令隊列保存請求事件這些命令，分批發(fā)送給瀏覽器客戶端102，從而可以保證瀏覽器客戶端102合理安排請求事件的處理時機，提高了瀏覽器側(cè)系統(tǒng)性能和數(shù)據(jù)處理的效率，同時也緩解了 web前端101的數(shù)據(jù)處理壓力。
[0055]然后,web前端101以預(yù)定格式，給iframe標簽的src屬性賦值,觸發(fā)全局變量命令隊列的發(fā)送；所述src屬性包括用于標識所述請求事件的類型的service字段和act1n字段。
[0056]由此,通過給創(chuàng)建好的隱藏iframe的src賦值的方式,將包含請求事件及其相關(guān)參數(shù)的全局變量命令隊列傳達到瀏覽器客戶端102。
[0057]web前端101通過給創(chuàng)建好的隱藏iframe的src賦值的方式,將全局變量命令隊列傳達到瀏覽器客戶端102