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