2010-11-08 54 views
4

請考慮以下兩個域:domain1.com和domain2。跨域哈希修改通訊

從domain1我打開一個指向domain2的iframe。

現在,我希望這些人互相溝通,我已經通過在兩個域上應用哈希變化事件偵聽器成功完成了這些工作。

這樣,如果domain2使用新散列調用parent.location,父窗口(domain1)中的散列將觸發。此外,如果來自父項的i將其src屬性更改爲新散列,則iframe中的散列更改事件將觸發。

這很好用!

來了麻煩:

在瀏覽器中的前進和後退的功能得到弄糟。簡單地說,通過創建兩個散列實例,必須單擊瀏覽器後退按鈕兩次以獲取父散列,因爲它必須先循環iframe的散列。

如何在不鎖定歷史記錄對象的情況下與跨域iframe進行通信?

謝謝!

+0

一個可能的(醜陋!)解決方案我來想想:我可以在domain1上追加一個指向domain2的腳本,如下所示:。這個JS文件將設置一個cookie,以便domain2上的另一個JS文件將偵聽更改。當cookie發生變化時,有些事情已經發生了變化,您會採取相應的措對這種方法有什麼想法? – John 2010-11-08 09:12:10

+0

雖然這可能不起作用。每次都需要一個請求。 – John 2010-11-08 09:16:33

回答

7

使用easyXDM,它是一個JavaScript庫,爲您完成所有的艱苦工作,使您能夠在所有瀏覽器(包括IE6)中執行跨域通信和RPC。

這不會使用任何當前瀏覽器(甚至不包括IE6)的HashTransport,因此不會更改歷史記錄。

你不會找到更好的東西..

您可以閱讀有關它的一些內部運作的這個Script Junkie article,或直接去readme at github

+0

嗨,肖恩,哇,真的令人印象深刻的工作,我現在正在實施它!會讓你知道它是如何解決我的感謝到目前爲止,夥計 – John 2010-11-08 14:47:55

+0

順便說一句,哪些瀏覽器將利用HashTransport?需要阻止它們,因爲它會與我現有的哈希實現一起用於書籤和導航。 – John 2010-11-08 14:50:09

+0

感謝,感謝它。支持所有'A級'瀏覽器的自述文件列表,它們不會使用HashTransport。 – 2010-11-08 16:21:37

2

另一種跨域通信技術是(ab)使用window.name。它需要一個iframe最初具有相同域src,然後移動到另一個設置window.name的域,然後退回到原始源(退回到歷史記錄中)。這個想法是window.name不會改變,除非它被明確設置,這意味着你可以轉移window.name數據跨域。

這種技術進行了更詳細的描述:
- http://skysanders.net/subtext/archive/2010/10/11/leveraging-window.name-transport-for-secure-and-efficient-cross-domain-communications.aspx
- http://jectbd.com/?p=611

一定要選擇避免在IE中點擊聲音的實施。

不幸的是,它仍然與你的歷史混雜在一起,但它向前邁進了一步,然後又回到了它所處的歷史點。然而,一個很大的好處是,你不必解析和編碼URI字符串,但可以立即使用JSON。

Using JSON lib for example

// access window.name from parent frame 
// note: only when iframe stepped back to same domain. 
var data = JSON.parse(iframe.contentWindow.name); 

// set child frame name 
// note: only when iframe stepped back to same domain. 
iframe.contentWindow.name = JSON.stringify({ 
    foo : "bar" 
}); // to JSON string 

// set own name (child frame) 
window.name = JSON.stringify({ 
    foo : "bar" 
}); // to JSON string 

該Cookie技術是可行的爲好,因爲如果你想避免歷史的變化,但仍然需要http請求您需要執行目標的iframe Ajax請求這兩種技術。 這樣:

  1. 將數據發送到iframe的x(採用餅乾或window.name技術)
  2. 與iframe中輪詢器捕捉數據x
  3. 執行在iframe中X AJAX請求。
  4. 發送數據退回IFrame Y(使用的cookie或window.name技術)
  5. 與輪詢器捕捉數據中的iframeý
  6. 執行做作獄。

任何頁面刷新(httprequest)或網址更改都會更新歷史記錄(舊版或所有IE版本除外),因此需要更多的代碼。

+0

謝謝你的詳盡答案!非常感激。但是,你確定這是跨域的嗎?當我嘗試訪問iframe中的window.name時:Error:Permission denied for 獲取屬性Window.name。 – John 2010-11-08 10:23:00

+0

研究它,你使用了哪個瀏覽器? – BGerrissen 2010-11-08 10:25:11

+0

macosx上的Firefox 3.6.12。在Chrome 7中也會發生:不安全的JavaScript嘗試從URL http://domain2.com的幀中訪問URL http://domain1.com。域,協議和端口必須匹配。 – John 2010-11-08 10:31:01