js 簡單使用postMessage iframe跨域通信

postMessage的定義

postMessage是html5引入的API,postMessage()方法允許來自不同源的腳本采用異步方式進行有效的通信,可以實現(xiàn)跨文本文檔,多窗口,跨域消息傳遞.多用于窗口間數(shù)據(jù)通信,這也使它成為跨域通信的一種有效的解決方案.

發(fā)送數(shù)據(jù):

// 父級頁面發(fā)送數(shù)據(jù)
window.postMessage(message, targetOrigin, [transfer]);
window.postMessage(‘要發(fā)送的消息對象’, 可指定目標(biāo)窗口域名也可 '*'發(fā)送到所有窗口);
// 子級頁面發(fā)送數(shù)據(jù)
window.parent.postMessage(data,'*');
// 或
top.postMessage(data,'*');

message

要發(fā)送到其他窗口的數(shù)據(jù),它將會被!結(jié)構(gòu)化克隆算法序列化.這意味著你可以不受什么限制的將數(shù)據(jù)對象安全的傳送給目標(biāo)窗口而無需自己序列化.

targetOrigin

通過窗口的origin屬性來指定哪些窗口能接收到消息事件,指定后只有對應(yīng)origin下的窗口才可以接收到消息,設(shè)置為通配符"*"表示可以發(fā)送到任何窗口,但通常處于安全性考慮不建議這么做.如果想要發(fā)送到與當(dāng)前窗口同源的窗口,可設(shè)置為"/"

transfer | 可選屬性

是一串和message同時傳遞的Transferable對象,這些對象的所有權(quán)將被轉(zhuǎn)移給消息的接收方,而發(fā)送一方將不再保有所有權(quán).

接收數(shù)據(jù)

window.addEventListener('message',e=> {
        console.log(e)
});

下面是打印出的結(jié)果 data屬性為傳輸過來的數(shù)據(jù)


image

若用到的地方很多 建議加上 targetOrigin 屬性 并且給數(shù)據(jù)加好type確保數(shù)據(jù)正確的被接收

歡迎對這個有研究、有興趣或者發(fā)現(xiàn)文章有錯誤的地方的伙伴們和我交流,共同進步~~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市怒允,隨后出現(xiàn)的幾起案子淑蔚,更是在濱河造成了極大的恐慌,老刑警劉巖勘究,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件矮湘,死亡現(xiàn)場離奇詭異,居然都是意外死亡口糕,警方通過查閱死者的電腦和手機缅阳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來景描,“玉大人十办,你說我怎么就攤上這事〕祝” “怎么了向族?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長棠绘。 經(jīng)常有香客問我件相,道長再扭,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任夜矗,我火速辦了婚禮泛范,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘紊撕。我一直安慰自己罢荡,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布逛揩。 她就那樣靜靜地躺著柠傍,像睡著了一般。 火紅的嫁衣襯著肌膚如雪辩稽。 梳的紋絲不亂的頭發(fā)上惧笛,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天,我揣著相機與錄音逞泄,去河邊找鬼患整。 笑死,一個胖子當(dāng)著我的面吹牛喷众,可吹牛的內(nèi)容都是我干的各谚。 我是一名探鬼主播,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼到千,長吁一口氣:“原來是場噩夢啊……” “哼昌渤!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起憔四,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤膀息,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后了赵,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體潜支,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年柿汛,在試婚紗的時候發(fā)現(xiàn)自己被綠了冗酿。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡络断,死狀恐怖裁替,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情貌笨,我是刑警寧澤弱判,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站躁绸,受9級特大地震影響裕循,放射性物質(zhì)發(fā)生泄漏臣嚣。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一剥哑、第九天 我趴在偏房一處隱蔽的房頂上張望硅则。 院中可真熱鬧,春花似錦株婴、人聲如沸怎虫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽大审。三九已至,卻和暖如春座哩,著一層夾襖步出監(jiān)牢的瞬間徒扶,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工根穷, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留姜骡,地道東北人。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓屿良,卻偏偏與公主長得像圈澈,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子尘惧,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 今天感恩節(jié)哎康栈,感謝一直在我身邊的親朋好友。感恩相遇喷橙!感恩不離不棄啥么。 中午開了第一次的黨會,身份的轉(zhuǎn)變要...
    迷月閃星情閱讀 10,576評論 0 11
  • 彩排完重慢,天已黑
    劉凱書法閱讀 4,232評論 1 3
  • 表情是什么饥臂,我認為表情就是表現(xiàn)出來的情緒逊躁。表情可以傳達很多信息似踱。高興了當(dāng)然就笑了,難過就哭了稽煤。兩者是相互影響密不可...
    Persistenc_6aea閱讀 125,360評論 2 7