資訊專欄INFORMATION COLUMN
摘要：四傳遞信息給父頁面參考跨域子頁面?zhèn)鹘o父頁面父頁面代碼崔渙測(cè)試父頁面參數(shù)中有屬性，就是父窗口發(fā)送過來的數(shù)據(jù)把父窗口發(fā)送過來的數(shù)據(jù)顯示在子窗口中。五簡(jiǎn)單分析和安全問題傳送過來的信息如下圖，幾乎包含了所有應(yīng)該有的信息。
一：傳統(tǒng)的解決方式。背景：由于同源策略存在，javascript的跨域一直都是一個(gè)棘手的問題。父頁面無法直接獲取iframe內(nèi)部的跨域資源；同時(shí)，iframe內(nèi)部的跨域資源也無法將信息直接傳遞給父頁面。
傳統(tǒng)的iframe資源解決方式：主要通過通過中間頁面代理，此處不再贅述，參考中間頁獲取跨域iframe
二：html5 postMessage的產(chǎn)生隨著HTML5的發(fā)展，html5工作組提供了兩個(gè)重要的接口：postMessage(send) 和 onmessage。這兩個(gè)接口有點(diǎn)類似于websocket，可以實(shí)現(xiàn)兩個(gè)跨域站點(diǎn)頁面之間的數(shù)據(jù)傳遞。
postMessage API
下面是實(shí)踐過程中兩個(gè)小栗子：分別父頁面?zhèn)鬟f信息給iframe，iframe傳遞信息給父頁面。
三：iframe獲取父頁面信息話不多說，直接上碼：
參考demo：父頁面?zhèn)鹘o子頁面demo
崔渙 iframe postmessage 父頁面
子頁面代碼
崔渙測(cè)試子頁面信息 this is the 8003 port for cuixiaozhuai
demo 效果如下圖：兩個(gè)跨域頁面之間，父頁面給子頁面?zhèn)鬟f數(shù)據(jù)。
參考demo：跨域子頁面?zhèn)鹘o父頁面demo
父頁面代碼子頁面代碼崔渙測(cè)試父頁面
this is the 1015 port for cuixiaozhuai。
崔小渙iframe postmessage 測(cè)試頁面
this is the port for cuixiaozhuai
demo 效果如下圖：兩個(gè)跨域頁面之間，子頁面?zhèn)鬟f數(shù)據(jù)給父頁面?zhèn)鬟f數(shù)據(jù)。
postmessage 傳送過來的信息如下圖，
幾乎包含了所有應(yīng)該有的信息。甚至data中可以包含object，出于安全考慮可以域的校驗(yàn)，數(shù)據(jù)規(guī)則的校驗(yàn)安全校驗(yàn)，如下代碼
window.addEventListener("message", function (event) {
//校驗(yàn)函數(shù)是否合法
var checkMessage = function () {
// 只獲取需要的域，并非所有都可以跨域
if (event.origin != "need domain") {
return false;
}
var message = event.data;
// 傳輸數(shù)據(jù)類型校驗(yàn)
if (typeof(message) !== "object") {
return false;
}
// message 的rule中包含xxx則為xxx需要字段。
return message.rule === "xxx";
};
if (checkMessage()) {
// 通過校驗(yàn)進(jìn)行相關(guān)操作
addDetailFunc(event);
}
});
【轉(zhuǎn)載請(qǐng)注明：postMessage處理iframe 跨域問題 | 靠譜崔小拽 】
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/78770.html
摘要：面試必考題吧，所以在這會(huì)詳細(xì)介紹以下內(nèi)容跨域產(chǎn)生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優(yōu)缺點(diǎn)什么是跨域由于瀏覽器廠商對(duì)安全性的考慮，提出了瀏覽器的同源策略做為解決方案。 面試必考題吧，所以在這會(huì)詳細(xì)介紹以下內(nèi)容 跨域產(chǎn)生的原因 羅列最常用的解決方法 分析各種方法原理 羅列各種方法優(yōu)缺點(diǎn) 什么是跨域 由于瀏覽器廠商對(duì)安全性的考慮，提出了瀏覽器的同源策略做為解決方案。它...
摘要：面試必考題吧，所以在這會(huì)詳細(xì)介紹以下內(nèi)容跨域產(chǎn)生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優(yōu)缺點(diǎn)什么是跨域由于瀏覽器廠商對(duì)安全性的考慮，提出了瀏覽器的同源策略做為解決方案。 面試必考題吧，所以在這會(huì)詳細(xì)介紹以下內(nèi)容 跨域產(chǎn)生的原因 羅列最常用的解決方法 分析各種方法原理 羅列各種方法優(yōu)缺點(diǎn) 什么是跨域 由于瀏覽器廠商對(duì)安全性的考慮，提出了瀏覽器的同源策略做為解決方案。它...
摘要：面試必考題吧，所以在這會(huì)詳細(xì)介紹以下內(nèi)容跨域產(chǎn)生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優(yōu)缺點(diǎn)什么是跨域由于瀏覽器廠商對(duì)安全性的考慮，提出了瀏覽器的同源策略做為解決方案。 面試必考題吧，所以在這會(huì)詳細(xì)介紹以下內(nèi)容 跨域產(chǎn)生的原因 羅列最常用的解決方法 分析各種方法原理 羅列各種方法優(yōu)缺點(diǎn) 什么是跨域 由于瀏覽器廠商對(duì)安全性的考慮，提出了瀏覽器的同源策略做為解決方案。它...
閱讀 3659·2021-11-25 09:43
閱讀 654·2021-09-22 15:59
閱讀 1758·2021-09-06 15:00
閱讀 1781·2021-09-02 09:54
閱讀 699·2019-08-30 15:56
閱讀 1193·2019-08-29 17:14
閱讀 1852·2019-08-29 13:15
閱讀 893·2019-08-28 18:28
