XDM 跨文件訊息傳送

cross-document messaging 類似於xss的簡稱,故稱為 xdm 而不是 cdm

某些時候 xdm 也能作為跨域的實現手段之一

與jsonp 和 傳統的 cors 跨域方式不同

xdm通常用於不同域的頁面之間傳遞訊息

postmessage() 方法作為 xdm 的核心被新增進了 html5 規範中

該方法的作用是:向當前頁面的iframe或者彈出的視窗傳遞訊息

該方法用於接收以下兩個引數:

訊息的內容

接收訊息的域

通過第二個引數可以防止瀏覽器將資訊傳送到不安全的地方

使用方法如下:

//

支援xdm的瀏覽器也支援 iframe 的 contentwindow屬性
let iframewindow = document.getelementbyid("myframe").contentwindow;
iframewindow.postmessage("這裡是訊息","");

如果匹配,則將訊息傳入內嵌框架中,否則什麼也不做

當然該引數也可以設定為"*" 表示所有域都可以接受訊息

傳送訊息介紹完了,自然就需要接收傳遞的資訊

當文件接收到 xdm訊息時就會觸發 window 物件的 message 事件

該事件是以非同步形式觸發的所以可能存在時延, 觸發該事件後,該事件的事件物件(event)會包含以下資訊:

就像傳送時指定訊息接收的域一樣,收到訊息後驗證訊息的**域也同樣重要,以此保證訊息來自已知的域

基本的驗證如下:

window.onmessage = function

(event)
}

evnet.source 大多數情況下只是 window 物件的**物件,也就是說並不是真正的 window 物件

所以不能通過該**物件來訪問原本 window 物件上的屬性和值

xdm的乙個怪異之處在於:

postmessage的第乙個引數最早是作為永遠都是字串來實現的,但後來允許傳入任何資料結構,但是為了保險起見最好還是只傳入字串,如果希望傳入json資料最好使用 json.stringify() 來處理

圈起來上面的是要考的,在阿里面前端的時候被問到,當時是矇逼且絕望的emm....

最後就是這種跨域的瀏覽器相容情況了,話不多說直接上圖,自己感受

XDM 跨文件訊息傳送

cross document messaging 類似於xss的簡稱,故稱為 xdm 而不是 cdm 某些時候 xdm 也能作為跨域的實現手段之一 與jsonp 和 傳統的 cors 跨域方式不同 xdm通常用於不同域的頁面之間傳遞訊息 postmessage 方法作為 xdm 的核心被新增進了 h...

XDM跨文字訊息傳遞 postMessage

xdm的核心時postmessage 方法，目的 向另乙個地方傳遞訊息，另乙個地方指的是包含在當前頁面的元素，或者由當前頁面彈出的視窗。postmessage 方法接受兩個引數 一條訊息 string 和乙個表示訊息接收方來自哪個域的字串 可以寫成 表示可以把訊息傳送給來自任何域的文件 頁面 例 d...

前端跨域技術之跨文件訊息傳輸

跨文件訊息傳送，簡稱為xdm，指的是來自不同的域的頁面間的傳遞訊息。如果兩個網頁不同源，就無法拿到對方的 dom。典型的例子是 iframe 視窗和window.open 方法開啟的視窗，它們與父視窗無法通訊。比如,父視窗執行下面的命令，如果 iframe 視窗不是同源將會報錯。document.g...