出於瀏覽器的同源策略,我們經常會遇到瀏覽器跨域的問題。
簡單的說跨域基本解決方案是:
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.06.0 (6.0) [1] [4]
8.0 [2] [3]
9.54.0
transfer
argument
?20.0 (20.0)
not supported??
otherwindow.postmessage(message, targetorigin, [transfer]);
otherwindow:目標視窗,是 window.frames 屬性的成員或者由 window.open 方法建立的視窗
message事件
再通過繫結該視窗的message事件,來獲取資訊,例如:
window.addeventlistener('message', function(event) ,
false);
這給我們提供了一種跨非同源文件通訊方案。這裡有乙個簡單的例子:
方案基本原理
基本原理現在就比較清晰了,我們依然使用同源iframe做**,但是主頁面與iframe的通訊方式是利用postmessage實現的。
現成方案
如果你已經只為ie8以上瀏覽器使用者服務了(國外專案基本已經將ie6、7淘汰了),而且你不想處理這些相容性問題,那麼你可以選用下面老外實現的現成方案:
你可能不知道的東西
元素可以分為塊級元素,行內元素以及行內塊級元素。行內元素的margin或者padding只有margin left和margin right以及padding left和padding right有效果,margin top margin bottom padding top padding bot...
你可能不知道的const
眾所周知,使用 const 宣告的變數必須同時初始化為某個值。一經宣告,在其生命週期的任何時候都不能再重新賦予新值 const a syntaxerror 常量宣告時沒有初始化 const b 3 console.log b 3 b 4 typeerror 給常量賦值const 宣告只應用到頂級原語...
你可能不知道的python logging機制
先來看幾個例子,先想一下執行結果,答案稍後揭曉 例一 mylogger logging.getlogger mylogger mylogger.info mylogger info mylogger.warning mylogger warning 例二 mylogger logging.getlo...