Vue進(jìn)階（八十六）：VUE中iframe結(jié)合window.postMessage實(shí)現(xiàn)跨域通信
什么是iframe？
iframe 元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）。
什么是postMessage？
window.postMessage() 方法可以安全地實(shí)現(xiàn)跨源通信。通常，對(duì)于兩個(gè)不同頁面的腳本，只有當(dāng)執(zhí)行它們的頁面位于具有相同的協(xié)議（通常為https），端口號(hào)（443為https的默認(rèn)值），以及主機(jī) (兩個(gè)頁面的模數(shù) Document.domain設(shè)置為相同的值) 時(shí)，這兩個(gè)腳本才能相互通信。window.postMessage() 方法提供了一種受控機(jī)制來規(guī)避此限制，只要正確的使用，這種方法就很安全。
使用場(chǎng)景：
在一個(gè)項(xiàng)目的頁面中嵌入另一個(gè)項(xiàng)目的頁面，需要實(shí)現(xiàn)父子，子父頁面的通信。
1.嵌入頁面
iframe使用如下（端口為8080）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
一、父頁面向子頁面?zhèn)髦?/p>
父頁面代碼：
sendMessage () { // 外部vue向iframe內(nèi)部傳數(shù)據(jù) this.iframeWin.postMessage({ cmd: 'success', data: "我是來自父頁面的data!" }, '*')
1
2
3
4
5
6
子頁面監(jiān)聽同理。
Vue
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。
相關(guān)文章
