專利名稱:Web頁面跨域通信方法和裝置的制作方法
技術領域:
本發(fā)明涉及網(wǎng)絡技術,特別涉及一種Web頁面跨域通信方法和裝置。
背景技術:
API (Application Programming Interface,應用程序編程接口)是一些預先定義的函數(shù),目的是提供應用程序(或開發(fā)人員)基于某軟件(或硬件)的訪問一組例程的能力,而又無需訪問軟件的源碼,或理解軟件的內部工作機制的細節(jié)。Windows API是一套用來控制Windows的各個部件的外觀和行為的預先定義的Windows函數(shù)。用戶的每個動作都會引發(fā)一個或幾個函數(shù)的運行以告訴Windows發(fā)生了什么。一個HTML頁面可以有一個或多個Web子頁面(子框架),Web子頁面中可以嵌套Web子頁面,這些Web子頁面可能屬于不同的域,而不同域的Web子頁面之間也有相互通信的需求。但是IE8版本以前的瀏覽器出于安全的考慮,不能自動支持不同域的Web頁面之間的跨域通信,而IE8版本以前的瀏覽器又占有很大的市場份額。因此,需要解決IE8版本以前的瀏覽器中不同域的Web頁面之間的跨域通信的問題。傳統(tǒng)的方法是設置一臺中轉服務器,需要跨域通信的兩個Web頁面通過中轉服務器通信。還有一種方法是采用部署代理文件的方式,例如,在域名為A的Web頁面中部署域名為B的Web頁面的代理文件,并在域名為B的Web頁面中部署域名為A的Web頁面的代理文件,兩個Web頁面通過代理文件實現(xiàn)跨域通信。但是,上述設置中轉服務 器的方法會帶來額外的開銷,增加了成本,而采用部署代理文件的方法,則也需要較高的部署成本。
發(fā)明內容基于此,有必要提供一種能減少成本的Web頁面跨域通信方法。一種Web頁面跨域通信方法,包括以下步驟:添加能被不同域的Web頁面訪問的API對象,所述對象實現(xiàn)了消息通知方法以及所述方法的監(jiān)聽事件;綁定第一 Web頁面的回調函數(shù)與所述監(jiān)聽事件;在第二 Web頁面向所述第一 Web頁面發(fā)送消息時,調用所述消息通知方法;觸發(fā)所述監(jiān)聽事件,將所述消息傳遞給所述第一 Web頁面的回調函數(shù);其中,所述第一 Web頁面與所述第二 Web頁面屬于不同的域。此外,還有必要提供一種能減少成本的Web頁面跨域通信裝置。一種Web頁面跨域通信裝置,包括:初始化模塊,用于添加能被不同域的Web頁面訪問的API對象,所述對象實現(xiàn)了消息通知方法以及所述方法的監(jiān)聽事件,以及綁定第一 Web頁面的回調函數(shù)與所述監(jiān)聽事件;消息通知模塊,用于在第二 Web頁面向所述第一 Web頁面發(fā)送消息時,調用所述消息通知方法;回傳模塊,用于觸發(fā)所述監(jiān)聽事件,將所述消息傳遞給所述第一 Web頁面的回調函數(shù);其中,所述第一 Web頁面與所述第二 Web頁面屬于不同的域。上述Web頁面跨域通信方法及裝置,通過添加能被不同域的Web頁面訪問的、且實現(xiàn)了消息通知方法以及該方法的監(jiān)聽事件的API對象,不同域的Web頁面都可調用此API對象的消息通知方法發(fā)送消息,還可以綁定其回調函數(shù)與消息通知方法的監(jiān)聽事件,以響應向該Web頁面?zhèn)魉偷南?,實現(xiàn)了不同域的Web頁面之間的跨域通信。由于不需要設置中轉服務器或者部署代理文件來進行跨域通信,因此上述Web頁面跨域通信方法和裝置能減少成本。
圖1為一個實施例中的Web頁面跨域通信方法的流程示意圖;圖2為一個實施例中第一 Web頁面與第二 Web頁面通信的示意圖;圖3為一個實施例中的Web頁面跨域通信裝置的結構示意圖。
具體實施方式如圖1所示,在一個實施例中,一種Web頁面跨域通信方法,包括以下步驟:步驟S10,添加能被不同域的Web頁面訪問的API對象,該對象實現(xiàn)了消息通知方法以及該方法的監(jiān)聽事件。具體的,在一個實施例中,該API對象為窗口對象的全局成員對象。由于Web頁面都繼承自它們的基類,即窗口對象(window對象),屬于不同域的Web頁面都可訪問窗口對象的全局成員對象(即external成員),因此API對象可以為窗口對象的全局成員對象,以能夠被不同域的Web頁面訪問。該API對象為窗口對象的全局成員對象,則不同域的Web頁面都可調用該API對象的消息通知方法來傳送消息。進一步的,為了響應消息通知方法傳送的消息,該API對象還實現(xiàn)消息通知方法的監(jiān)聽事件。當消息通知方法被調用時,即可觸發(fā)監(jiān)聽事件。在一個實施例中,API對象可封裝在瀏覽器插件或瀏覽器擴展組件中、或者內置于瀏覽器中。具體的,對于基于組件對象模型(component object model,COM)的瀏覽器,如IE瀏覽器,可將該API對象封裝在瀏覽器的擴展組件中,因為IE瀏覽器內核有一種擴展機制,提供了專門的接口(擴展組件)來實現(xiàn)窗口對象(window對象)的全局成員對象(external成員)。另外,對于可安裝瀏覽器插件的瀏覽器,API對象也可封裝在瀏覽器插件中,并通過安裝瀏覽器插件來添加API對象;其次,對于可自定義的瀏覽器,可直接將API對象添加到瀏覽器的代碼中。步驟S20,綁定第一 Web頁面的回調函數(shù)與上述監(jiān)聽事件。具體的,可在第一 Web頁面加載時或在加載完成后注冊API對象的消息通知方法的監(jiān)聽事件,即綁定頁面的回調函數(shù)與該監(jiān)聽 事件。觸發(fā)該監(jiān)聽事件即是觸發(fā)回調函數(shù),因此當消息通知方法被調用時,即可觸發(fā)回調函數(shù)以響應消息通知方法通知的消息。
步驟S30,在第二 Web頁面向第一 Web頁面發(fā)送消息時,調用API對象的消息通知方法,其中,第一 Web頁面和第二 Web頁面屬于不同的域。由于添加的該API對象可被不同域的Web頁面訪問,因此在第二 Web頁面向第一Web頁面發(fā)送消息時,可將第二 Web頁面要發(fā)送的消息傳遞給消息通知方法,并調用該消息通知方法。在一個實施例中,調用API對象的消息通知方法的步驟為:將第一 Web頁面的屬性信息及第二 Web頁面的消息傳遞給該消息通知方法,調用該消息通知方法。具體的,第一Web頁面的屬性信息可包括第一 Web頁面的名稱、所屬域名等。將第一 Web頁面的屬性信息傳遞給消息通知方法,這樣便能根據(jù)第一 Web頁面的屬性信息將消息正確地傳送到第一Web頁面。步驟S40,觸發(fā)上述監(jiān)聽事件,將第二 Web頁面的消息傳遞給第一 Web頁面的回調函數(shù)。在一個實施例中,在將第二 Web頁面的消息傳遞給第一 Web頁面的回調函數(shù)之前,還包括:根據(jù)傳遞給API對象的消息通知方法的第一 Web頁面的屬性信息查找第一 Web頁面的回調函數(shù)。具體的,API對象的監(jiān)聽事件可能與多個頁面的回調函數(shù)綁定,所以在監(jiān)聽事件被觸發(fā)后,需要判斷把消息傳送給哪個頁面的回調函數(shù)??筛鶕?jù)在上述傳遞給API對象的消息通知方法的第一 Web頁面的屬性信息來查找第一 Web頁面的回調函數(shù)。進一步的,將第二 Web頁面的消息傳遞給第一 Web頁面的回調函數(shù)。第一 Web頁面的回調函數(shù)可以對第二Web頁面的消息作相應的處理。在一個實施例中,如圖2所示,第一 Web頁面與第二 Web頁面屬于不同的域。具體的,第一 Web頁面和第二 Web頁面可以包含于一個HTML頁面中,例如,是HTML頁面中的兩個Frame (也稱IFrame, HTML頁面中的frame標簽定義了一個框架)。本實施例中,第二 Web頁面嵌套在第一 Web頁面中。應當說明的是,第一 Web頁面與第二 Web頁面也可以是并列關系。本實施例中,external成員為添加的能被不同域的Web頁面訪問的API對象,第一Web頁面和第二 Web頁面之間進行跨域通信的過程如下:(I)綁定第一 Web頁面的回調函數(shù)與external成員的監(jiān)聽事件。(2)在第二 Web頁面向第一 Web頁面發(fā)送消息時,將消息傳遞給external成員的消息通知方法,并調用該消息通知方法。(3)觸發(fā)external成員的監(jiān)聽事件,將消息傳遞給第一 Web頁面的回調函數(shù)。第一 Web頁面的回調函數(shù)可以對該消息作相應的處理,完成第一 Web頁面和第二 Web頁面之間的通信。如圖3所示,在一個實施例中,一種Web頁面跨域通信裝置,包括初始化模塊10、消息通知模塊20和回傳模塊30,其中:初始化模塊10用于添加能被不同域的Web頁面訪問的API對象,該對象實現(xiàn)了消息通知方法以及該方法的監(jiān)聽事件。具體的,在一個實施例中,該API對象為窗口對象的全局成員對象。由于Web頁面都繼承自它們的基類,即窗口對象(window對象),屬于不同域的Web頁面都可訪問窗口對象的全局成員對象(即external成員),因此API對象可以為窗口對象的全局成員對象,以能夠被不同域的Web頁面訪問。該API對象為窗口對象的全局成員對象,則不同域的Web頁面都可調用該API對象的消息通知方法來傳送消息。進一步的,為了響應消息通知方法傳送的消息,該API對象還實現(xiàn)消息通知方法的監(jiān)聽事件。當消息通知方法被調用時,即可觸發(fā)監(jiān)聽事件。在一個實施例中,API對象可封裝在瀏覽器插件或瀏覽器擴展組件中、或者內置于瀏覽器中。具體的,對于基于組件對象模型(component object model,COM)的瀏覽器,如IE瀏覽器,可將該API對象封裝在瀏覽器的擴展組件中,因為IE瀏覽器內核有一種擴展機制,提供了專門的接口(擴展組件)來實現(xiàn)窗口對象(window對象)的全局成員對象(external成員)。另外,對于可安裝瀏覽器插件的瀏覽器,API對象也可封裝在瀏覽器插件中,并通過安裝瀏覽器插件來添加API對象;其次,對于可自定義的瀏覽器,可直接將API對象添加到瀏覽器的代碼中。初始化模塊10還用于綁定第一 Web頁面的回調函數(shù)與上述監(jiān)聽事件。具體的,初始化模塊10可在第一 Web頁面加載時或在加載完成后注冊API對象的消息通知方法的監(jiān)聽事件,即綁定頁面的回調函數(shù)與該監(jiān)聽事件。觸發(fā)該監(jiān)聽事件即是觸發(fā)回調函數(shù),因此當消息通知方法被調用時,即可觸發(fā)回調函數(shù)以響應消息通知方法通知的消息。消息通知模塊20用于在第二 Web頁面向第一 Web頁面發(fā)送消息時,調用API對象的消息通知方法,其中,第一 Web頁面和第二 Web頁面屬于不同的域。由于添加的該API對象可被不同域的Web頁面訪問,因此在第二 Web頁面向第一Web頁面發(fā)送消息時,消息通知模塊20可用于將第二 Web頁面的消息傳遞給消息通知方法,并調用該消息通知方法。在一個實施例中,在第二 Web頁面向第一 Web頁面發(fā)送消息時,消息通知模塊20用于將第一 Web頁面的屬性信息及第二 Web頁面的消息傳遞給該消息通知方法,調用該消息通知方法。具體的,第一 Web頁面的屬性信息可包括第一 Web頁面的名稱、所屬域名等。將第一 Web頁面的屬性信息傳遞給消息通知方法,這樣便能根據(jù)第一 Web頁面的屬性信息將消息正確地傳送到第一 Web頁面?;貍髂K30用于觸發(fā)上述監(jiān)聽事件,將第二 Web頁面的消息傳遞給第一 Web頁面的回調函數(shù)。在一個實施例中,在將第二 Web頁面的消息傳遞給第一 Web頁面的回調函數(shù)之前,回傳模塊30根據(jù)傳遞給API對象的消息通知方法的第一 Web頁面的屬性信息查找第一 Web頁面的回調函數(shù)。具體的,API對象的監(jiān)聽事件可能與多個頁面的回調函數(shù)綁定,所以在監(jiān)聽事件被觸發(fā)后,回傳模塊30需要判斷把消息傳送給哪個頁面的回調函數(shù)??筛鶕?jù)在上述傳遞給API對象的消息通知方法的第一 Web頁面的屬性信息來查找第一 Web頁面的回調函數(shù)。進一步的,回傳模塊30用于將第二 Web頁面的消息傳遞給第一 Web頁面的回調函數(shù)。第一Web頁面的回調函數(shù)可以對第二 Web頁面的消息作相應的處理。上述Web頁面跨域通信方法和裝置,通過添加能被不同域的Web頁面訪問的、且實現(xiàn)了消息通知方法以及該方法的監(jiān)聽事件的API對象,不同域的Web頁面都可調用此API對象的消息通知方法發(fā)送消息,還可以綁定其回調函數(shù)與消息通知方法的監(jiān)聽事件,以響應向該Web頁面?zhèn)魉偷南?,實現(xiàn)了不同域的Web頁面之間的跨域通信,上述方式操作簡便,不需要設置中轉服務器或者部署代理文件來進行跨域通信,從而節(jié)約了成本。以上所述實施例僅表達了本發(fā)明的幾種實施方式,其描述較為具體和詳細,但并不能因此而理解為對本發(fā)明專利范圍的限制。應當指出的是,對于本領域的普通技術人員來說,在不脫離本發(fā)明構思的前提下,還可以做出若干變形和改進,這些都屬于本發(fā)明的保護范圍。因此,本發(fā)明專利的保護范圍應以所附權利要求為準。
權利要求
1.一種Web頁面跨域通信方法,包括以下步驟: 添加能被不同域的Web頁面訪問的API對象,所述對象實現(xiàn)了消息通知方法以及所述方法的監(jiān)聽事件; 綁定第一 Web頁面的回調函數(shù)與所述監(jiān)聽事件; 在第二 Web頁面向所述第一 Web頁面發(fā)送消息時,調用所述消息通知方法; 觸發(fā)所述監(jiān)聽事件,將所述消息傳遞給所述第一 Web頁面的回調函數(shù); 其中,所述第一 Web頁面與所述第二 Web頁面屬于不同的域。
2.根據(jù)權利要求1所述的Web頁面跨域通信方法,其特征在于,所述API對象封裝在瀏覽器插件或瀏覽器擴展組件中、或者內置于瀏覽器中。
3.根據(jù)權利要求1所述的Web頁面跨域通信方法,其特征在于,所述調用所述消息通知方法的步驟為:將所述第一 Web頁面的屬性信息及所述消息傳遞給所述消息通知方法,調用所述方法。
4.根據(jù)權利要求3所述的Web頁面跨域通信方法,其特征在于,在所述將消息傳遞給所述第一 Web頁面的回調函數(shù)的步驟之前,還包括: 根據(jù)所述傳遞給消息通知方法的第一 Web頁面的屬性信息查找所述第一 Web頁面的回調函數(shù)。
5.根據(jù)權利要求1至4任意一項所述的Web頁面跨域通信方法,其特征在于,所述API對象為窗口對象的全局成員對象。
6.一種Web頁面跨域通信裝置,其特征在于,包括: 初始化模塊,用于添加能被不同域的Web頁面訪問的API對象,所述對象實現(xiàn)了消息通知方法以及所述方法的監(jiān)聽事件,以及綁定第一 Web頁面的回調函數(shù)與所述監(jiān)聽事件; 消息通知模塊,用于在第二 Web頁面向所述第一 Web頁面發(fā)送消息時,調用所述消息通知方法; 回傳模塊,用于觸發(fā)所述監(jiān)聽事件,將所述消息傳遞給所述第一 Web頁面的回調函數(shù); 其中,所述第一 Web頁面與所述第二 Web頁面屬于不同的域。
7.根據(jù)權利要求6所述的Web頁面跨域通信裝置,其特征在于,所述API對象封裝在瀏覽器插件或瀏覽器擴展組件中、或者內置于瀏覽器中。
8.根據(jù)權利要求6所述的Web頁面跨域通信裝置,其特征在于,所述消息通知模塊還用于將所述第一 Web頁面的屬性信息及所述消息傳遞給所述消息通知方法,調用所述方法。
9.根據(jù)權利要求8所述的Web頁面跨域通信裝置,其特征在于,所述回傳模塊還用于觸發(fā)所述監(jiān)聽事件,根據(jù)所述傳遞給消息通知方法的第一 Web頁面的屬性信息查找所述第一Web頁面的回調函數(shù),將所述消息傳遞給所述第一 Web頁面的回調函數(shù)。
10.根據(jù)權利要求6至9任意一項所述的Web頁面跨域通信裝置,其特征在于,所述API對象為窗口對象的全局成員對象。
全文摘要
一種Web頁面跨域通信方法,包括以下步驟添加能被不同域的Web頁面訪問的API對象,所述對象實現(xiàn)了消息通知方法以及所述方法的監(jiān)聽事件;綁定第一Web頁面的回調函數(shù)與所述監(jiān)聽事件;在第二Web頁面向所述第一Web頁面發(fā)送消息時,調用所述消息通知方法;觸發(fā)所述監(jiān)聽事件,將所述消息傳遞給所述第一Web頁面的回調函數(shù);所述第一Web頁面與所述第二Web頁面屬于不同的域。上述Web頁面跨域通信方法實現(xiàn)了不同域的Web頁面之間的跨域通信,且成本較低。此外,還提供一種Web頁面跨域通信裝置。
文檔編號H04L29/06GK103095762SQ20111034232
公開日2013年5月8日 申請日期2011年11月2日 優(yōu)先權日2011年11月2日
發(fā)明者黃奎, 李臨, 郭學亨, 龍丁奮 申請人:騰訊科技(深圳)有限公司