你可能不知道的跨域解決方案


出於瀏覽器的同源策略,我們經常會遇到瀏覽器跨域的問題。

簡單的說跨域基本解決方案是:

  • GET請求用JSONP
  • 其他請求用同源iframe做代理

JSONP的介紹很多,這里就不多說了。

而同源iframe做代理主要是主窗口與iframe的通訊問題,因為這里也有同源策略。常見的方法是使用window.name或者通過url param來通訊。但這些方法都需要反復加載iframe來完成的,資源消耗較高,有沒有更好的方案呢?

 

window.postMessage

window.postMessage最早由IE8引入,主要為了解決跨文檔通訊問題,以下使其支持列表:

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 6.0 (6.0) [1] [4] 8.0 [2] [3] 9.5 4.0
transfer argument ? 20.0 (20.0) Not supported ? ?
otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow:目標窗口,是 window.frames 屬性的成員或者由 window.open 方法創建的窗口

  • message: 要發送的消息,類型為 String、Object (IE8、9 不支持)
  • targetOrigin: 限定消息接收范圍,不限制請使用 ‘*’

 

message事件

再通過綁定該窗口的message事件,來獲取信息,例如:

window.addEventListener('message', function (event) {
  console.log(event.data);
}, false);

 

跨非同源文檔通訊

這給我們提供了一種跨非同源文檔通訊方案。這里有一個簡單的例子:

http://html5demos.com/postmessage2

 

方案基本原理

基本原理現在就比較清晰了,我們依然使用同源iframe做代理,但是主頁面與iframe的通訊方式是利用postMessage實現的。

 

現成方案

如果你已經只為IE8以上瀏覽器用戶服務了(國外項目基本已經將IE6、7淘汰了),而且你不想處理這些兼容性問題,那么你可以選用下面老外實現的現成方案:

https://github.com/jpillora/xdomain

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM