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

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

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