使用postMesssage()實(shí)現(xiàn)跨域iframe頁(yè)面間的信息傳遞方法
由于web同源策略的限制,當(dāng)頁(yè)面使用跨域iframe鏈接時(shí),主頁(yè)面與子頁(yè)面是無(wú)法交互的,這對(duì)頁(yè)面間的信息傳遞造成了不小的麻煩,經(jīng)過(guò)一系列的嘗試,最后我發(fā)現(xiàn)有以下方法可以實(shí)現(xiàn):
1. 子頁(yè)面url傳參
簡(jiǎn)單說(shuō)來(lái)就是把所有需要傳遞的參數(shù)加到與主頁(yè)面同源的url上,將子頁(yè)面重定向到該url,然后主頁(yè)面通過(guò)iframe的src獲取這些參數(shù)
過(guò)程非常復(fù)雜,不建議使用這種方法
2. postMessage()
postMesssage()是HTML5提供的一個(gè)基于事件的消息傳輸API,可以實(shí)現(xiàn)跨文本檔、多窗口、跨域消息傳遞。
postMessage(data,origin)方法接受兩個(gè)參數(shù)
1.data:要傳遞的數(shù)據(jù),html5規(guī)范中提到該參數(shù)可以是JavaScript的任意基本類型或可復(fù)制的對(duì)象,然而并不是所有瀏覽器都做到了這點(diǎn)兒,部分瀏覽器只能處理字符串參數(shù),所以我們?cè)趥鬟f參數(shù)的時(shí)候需要使用JSON.stringify()方法對(duì)對(duì)象參數(shù)序列化,在低版本IE中引用json2.js可以實(shí)現(xiàn)類似效果。
2.origin:字符串參數(shù),指明目標(biāo)窗口的源,協(xié)議+主機(jī)+端口號(hào)[+URL],URL會(huì)被忽略,所以可以不寫,這個(gè)參數(shù)是為了安全考慮,postMessage()方法只會(huì)將message傳遞給指定窗口,當(dāng)然如果愿意也可以建參數(shù)設(shè)置為"*",這樣可以傳遞給任意窗口,如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。
發(fā)送消息(子頁(yè)面)
function sendMessage(param) { var url; if (param.url) { url = param.url; }; var dataJson = JSON.stringify({ type:1, a: param.c, b: param.c, c: param.c, url: url }); window.parent.postMessage(dataJson, '*'); }
由于部分瀏覽器只能處理字符串參數(shù),我們需要先使用JSON.stringfy()將參數(shù)轉(zhuǎn)換為字符串,然后再接收頁(yè)面使用JSON.parse()轉(zhuǎn)換回對(duì)象。
接收消息
對(duì)于子頁(yè)面?zhèn)鬟f過(guò)來(lái)的參數(shù),我們可以通過(guò)監(jiān)聽(tīng)window的message事件來(lái)獲取:
window.addEventListener('message', function(e) {
var data = JSON.parse(e.data);
switch (data.type) {
case 1:
alert(data.a);break;
}
}, false);
message事件有幾個(gè)重要屬性
1.data:顧名思義,是傳遞來(lái)的message
2.source:發(fā)送消息的窗口對(duì)象
3.origin:發(fā)送消息窗口的源(協(xié)議+主機(jī)+端口號(hào))
通過(guò)postMesssage()方法和message事件就可以實(shí)現(xiàn)跨域傳遞消息了,需要注意的是,在demo中我們是通過(guò)子頁(yè)面向父頁(yè)面?zhèn)鬟f消息,所以使用的是window.parent發(fā)送,window接收:
window.parent.postMessage(dataJson, '*');如果是從主頁(yè)面向子頁(yè)面就需要對(duì)換,使用window發(fā)送,window.frames[0]來(lái)接收了。
以上這篇使用postMesssage()實(shí)現(xiàn)跨域iframe頁(yè)面間的信息傳遞方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 使用postMesssage()實(shí)現(xiàn)iframe跨域頁(yè)面間的信息傳遞
- js iframe跨域訪問(wèn)(同主域/非同主域)分別深入介紹
- 跨域傳值即主頁(yè)面與iframe之間互相傳值
- 利用iframe實(shí)現(xiàn)ajax跨域通信的實(shí)現(xiàn)原理(圖解)
- IFrame跨域高度自適應(yīng)實(shí)現(xiàn)代碼
- 如何設(shè)置iframe高度自適應(yīng)在跨域情況下的可用方法
- 關(guān)于Iframe如何跨域訪問(wèn)Cookie和Session的解決方法
- js跨域問(wèn)題之跨域iframe自適應(yīng)大小實(shí)現(xiàn)代碼
- iframe跨域與session失效問(wèn)題的解決辦法
- 關(guān)于iframe跨域POST提交的方法示例
相關(guān)文章
用JavaScript對(duì)JSON進(jìn)行模式匹配(Part 1-設(shè)計(jì))
在《從 if else 到 switch case 再到抽象》這篇文章里面說(shuō)到,解決 if else 和 switch case 分支過(guò)多的一個(gè)方法,就是做一個(gè)專用的 dispatcher ,讓它來(lái)負(fù)責(zé)進(jìn)行篩選與轉(zhuǎn)發(fā)。2010-07-07JS遍歷樹(shù)層級(jí)關(guān)系實(shí)現(xiàn)原理解析
這篇文章主要介紹了JS遍歷樹(shù)層級(jí)關(guān)系實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08js實(shí)現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實(shí)例
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)數(shù)組內(nèi)數(shù)據(jù)的上移和下移的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11js防抖-節(jié)流函數(shù)的基本實(shí)現(xiàn)和補(bǔ)充詳解
這篇文章主要介紹了防抖-節(jié)流函數(shù)的基本實(shí)現(xiàn)和補(bǔ)充,文章從基礎(chǔ)概念到手寫對(duì)防抖-節(jié)流函數(shù)的實(shí)現(xiàn)進(jìn)行講解,內(nèi)容詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-01-01正則表達(dá)式,替換所有HTML標(biāo)簽的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇正則表達(dá)式,替換所有HTML標(biāo)簽的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11JavaScript中valueOf函數(shù)與toString方法深入理解
基本上,所有JS數(shù)據(jù)類型都擁有valueOf和toString這兩個(gè)方法,null除外。它們倆解決javascript值運(yùn)算與顯示的問(wèn)題,本文將詳細(xì)介紹,有需要的朋友可以參考下2012-12-12