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

2021-09-06 12:44:47 字數 1152 閱讀 8839

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

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

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

transferargument

?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...