[發明專利]基于瀏覽器頁面間跨域通信的方法和系統

在審

• 申請號: 201410508440.8
• 申請日: 2014-09-28
• 公開（公告）號: CN104317819A
• 公開（公告）日: 2015-01-28
• 發明（設計）人: 劉吉;劉莎;魏大安
• 申請（專利權）人: 北京京東尚科信息技術有限公司;北京京東世紀貿易有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30;G06F9/54
• 代理公司: 中原信達知識產權代理有限責任公司 11219
• 代理人: 李寶泉;周亞榮

技術領域

本發明涉及一種基于瀏覽器頁面間跨域通信的方法和系統。

背景技術

在諸如云工作臺的web應用中，經常需要在該應用的頁面中引入其它第三方應用的頁面，并且web應用的頁面需要和第三方應用頁面進行相互通信，例如第三方應用頁面需要獲得web應用的頁面上顯示的用戶名等。在這種情況下，web應用的頁面中的javascript腳本需要調用第三方頁面上的javascript腳本的某個函數，而由于瀏覽器的安全限制，對于跨域名頁面間相互直接通信是不允許的。目前頁面間跨域相互通信有以下幾種方式：

第一種方式：利用兩個不同域名的頁面腳本的window對象的name屬性可以互相訪問進行通信。此方式只支持IE6、IE7、IE8、IE9瀏覽器，但不支持IE10、firefox和chrome瀏覽器，因此不能做到支持各種瀏覽器。

第二種方式：利用超文本標記語言5(html5)的本地通信應用程序接口，html5提供了postMessage腳本接口和message事件。postMessage腳本接口可以發消息，message事件可以監聽本頁面收到的消息。當前只有chrome、firefox和IE10以上才支持此方式，其它瀏覽器都不支持此方式，因此不能做到各種瀏覽器支持。

第三種方式：利用相同域名下兩個頁面間可以直接通信的方式。具體為：在第一域名的頁面A中，通過iframe標簽，指向第二域名頁面B的地址,引入第二域名頁面B的內容。第一域名頁面A發消息給第二域名頁面B：第一域名頁面A的腳本創建一個iframe標簽，并且頁面地址指向第二域名頁面C的地址，把消息作為字符串，以參數的形式和頁面地址進行拼接，第二域名服務器根據請求的參數，動態生成頁面C的腳本，返回給瀏覽器，瀏覽器在執行頁面C時，會執行該頁面C的腳本，該腳本會直接調用頁面B的腳本，并傳入該參數(因為瀏覽器的同源策略，相同域名下的頁面間可以直接通信)，第二域名頁面B的腳本函數接受該參數，然后做相應的處理。第二域名頁面B發消息給第一域名頁面A：第二域名頁面B的腳本創建一個iframe標簽，并且頁面地址指向第一域名頁面D的地址，把消息作為字符串，以參數的形式和頁面地址進行拼接，第一域名服務器根據請求的參數而動態生成頁面D的腳本，返回給瀏覽器，瀏覽器在執行頁面D時，會執行該頁面D的腳本，該腳本會直接調用頁面A的腳本，并傳入該參數(因為瀏覽器的同源策略，相同域名下的頁面間可以直接通信)，第一域名頁面A的腳本函數接受該參數，然后做相應的處理。目前云工作臺采用了該第三種方式。

此種方式雖然所有瀏覽器都支持，但是每次頁面間的跨域通信，都需要請求相應的服務器，增加和服務端的網絡通信，并且瀏覽器還需要額外加載和解析一個頁面，增加瀏覽器內存。

由于目前采用第三種方式，如果第一域名頁面和第二域名頁面間調用很頻繁，則會產生很多次網絡請求，增加服務端和客戶端的網絡連接數，瀏覽器也會解析因每次交互產生的iframe文檔，增加瀏覽器內存。

如果采用第一和第二種方式，又會造成只支持部分瀏覽器，導致用戶體驗極差。

因此，期望提供一種基于瀏覽器頁面間跨域通信的方法和系統。

發明內容

為了解決現有技術中的上述缺點和問題中的至少一個而提出本發明。基于現有技術存在的缺點，本發明提供了一種改進的基于瀏覽器頁面間跨域通信的方法和系統。根據本發明的方法和系統，可以實現在各種瀏覽器中跨域頁面間相互的頻繁調用，并且不需要和服務端進行網絡通信，不需要加載額外的頁面，即可以在頁面間進行相互通信。

根據一個方面，本發明提出了一種基于瀏覽器頁面間跨域通信的方法，包括：確定第一域名頁面的瀏覽器是否支持超文本標記語言5的消息發送接口；當確定第一域名頁面的瀏覽器支持超文本標記語言5的消息發送接口時，在第一域名頁面中使用超文本標記語言5的消息發送接口來發送消息；當確定第一域名頁面的瀏覽器不支持超文本標記語言5的消息發送接口時，在第一域名頁面中使用目標對象的名稱的形式來發送消息；確定第二域名頁面的瀏覽器是否支持超文本標記語言5的消息接收接口；當確定第二域名頁面的瀏覽器支持超文本標記語言5的消息接收接口時，在第二域名頁面中使用超文本標記語言的消息事件來完成頁面間跨域通信；以及當確定第二域名頁面的瀏覽器不支持超文本標記語言5的消息接收接口時，在第二域名頁面中通過獲得名稱值來完成頁面間跨域通信。

可選地，通過判斷超文本標記語言5的消息發送接口是否存在來確定瀏覽器是否支持超文本標記語言5的消息發送接口。