html5關(guān)于外鏈嵌入頁(yè)面通信問(wèn)題(postMessage解決跨域通信)
我要評(píng)論說(shuō)起來(lái)挺簡(jiǎn)單的，可以直接去查詢postMessage推送和window.addEventListener接收使用方式，能自己搞明白是最好的，本文章也只是記錄一下自己的使用方式
使用postMessage推送和window.addEventListener接收
原理：
發(fā)送方使用postMessage方法向接收方推送消息，第一個(gè)參數(shù)為推送的內(nèi)容，第二個(gè)參數(shù)是允許被訪問(wèn)的域名；
接收方通過(guò)監(jiān)聽(tīng)message的方法接收數(shù)據(jù)。
實(shí)現(xiàn)跨域就需要有兩個(gè)不同源的服務(wù)器咯
開(kāi)始
iframe引入頁(yè)面（我也是使用這樣方式）
父頁(yè)面（發(fā)送方）
<script>
//這里是發(fā)送監(jiān)聽(tīng)
function btnClick(params) {
console.log(1111)
var iframe = document.getElementById("childframe")
iframe.contentWindow.postMessage({
text:'你收到了沒(méi)有呀（白天）',
action : 'light' // action : 自定義動(dòng)作參數(shù)，用于接受收消息是的判斷
}, 'http://localhost:8000/#/');
}
function btnClick2(params) {
console.log(2222)
var iframe = document.getElementById("childframe")
iframe.contentWindow.postMessage({
text:'你收到了沒(méi)有呀（黑夜）',
action : 'dark' // action : 自定義動(dòng)作參數(shù)，用于接受收消息是的判斷
}, 'http://localhost:8000/#/');
//這是接收子頁(yè)面返回的監(jiān)聽(tīng)（當(dāng)時(shí)也是被各種文章搞的很懵圈呀，如果只父頁(yè)面發(fā)送消息不需要在接收子頁(yè)面的反饋可以不用寫(xiě)這些）
window.addEventListener('message', function (e) {
alert(e.data)
const data = e.data;
console.log(data,'接到你的頁(yè)面了data')
})
//下面這些都是踩過(guò)的坑
// var iwindow = iframe.contentWindow;
// var idoc = iwindow.document;
// console.log("window",iwindow);//獲取iframe的window對(duì)象
// console.log("document",idoc); //獲取iframe的document
// console.log("html",idoc.documentElement);//獲取iframe的html
// console.log("head",idoc.head); //獲取head
// console.log("body",idoc.body); //獲取body
// console.log(window.frames['myframe'].window)
}
</script>
<body>
<button onclick="btnClick()">點(diǎn)擊</button>
<br/>
<button onclick="btnClick2()">點(diǎn)擊</button>
<iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width="1400px" height="800px">
</body>
關(guān)于發(fā)送簡(jiǎn)單解釋一波：
<iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width="1400px" height="800px">
這里里面的src是子頁(yè)面的地址（這里是根據(jù)你自己寫(xiě)的路由或者那個(gè)頁(yè)面要監(jiān)聽(tīng)寫(xiě)的地址）。
postMessage({ text:'你收到了沒(méi)有呀（黑夜）', action : 'dark' }, 'http://localhost:8000/#/')
第一個(gè)參數(shù)是內(nèi)容，第二是子頁(yè)面的地址，這里可以只寫(xiě)項(xiàng)目地址就可以還有寫(xiě)的（例如：postMessage(‘內(nèi)容’, '')），我是沒(méi)試過(guò)但應(yīng)該也可以。
子頁(yè)面（接收方+反饋）
我這邊接收是直接在我但react項(xiàng)目里寫(xiě)的
componentWillMount() {
window.addEventListener('message', (e) => {
console.log(e)
let data= e.data //這就是接收到的數(shù)據(jù)
//e.origin這是發(fā)送數(shù)據(jù)的地址
})
...
...
...
//關(guān)于反饋我是在我項(xiàng)目里寫(xiě)了一個(gè)點(diǎn)擊動(dòng)作發(fā)送的如下
goCustomerDetail=(data)=>{
let url = data.url
// window.top.postMessage({
// text:'返回Url',
// url:url
// }, 'http://XXX:8083/ceshi/ceshi.html')
window.top.postMessage('{"name":"客戶詳情","path":"'+url+'"}', '*')
}
關(guān)于上面接收反饋解釋一波：
1、 接收 window.addEventListener('message', (e) => {console.log(e) })
其中e是整個(gè)接收到的消息體里面有很多內(nèi)容，自己拿使用的數(shù)據(jù)，注意這里應(yīng)該加判斷符合條件后在進(jìn)行一些操作
2、發(fā)送方式，我自己實(shí)驗(yàn)兩種反饋，父頁(yè)面都能收到
注意是用 window.top.postMessage反饋
結(jié)束
總結(jié)：這個(gè)方式還是很好用的，可以不同技術(shù)棧通信外鏈，但是安全方面不是很好，而且需要會(huì)出現(xiàn)跨域問(wèn)題數(shù)據(jù)請(qǐng)求不到或者接口被攔截，需要自己打開(kāi)接口設(shè)置一波繼續(xù)訪問(wèn)。
附贈(zèng)：還有其它方式的引入我自己沒(méi)用過(guò)，參考鏈接分享
https://www.jianshu.com/p/fb579be635b2
https://www.cnblogs.com/Jry666/p/8418643.html
https://blog.csdn.net/monkindey/article/details/23659387
到此這篇關(guān)于html5關(guān)于外鏈嵌入頁(yè)面通信問(wèn)題(postMessage解決跨域通信)的文章就介紹到這了,更多相關(guān)html5外鏈嵌入通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
詳解html5 postMessage解決跨域通信的問(wèn)題
這篇文章主要介紹了詳解html5 postMessage解決跨域通信的問(wèn)題的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-17html5通過(guò)postMessage進(jìn)行跨域通信的方法
這篇文章主要介紹了html5通過(guò)postMessage進(jìn)行跨域通信的方法的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-04html5的websockets全雙工通信詳解學(xué)習(xí)示例
本文主要研究HTML5 WebSockets的使用方法，它是HTML5中最強(qiáng)大的通信功能，定義了一個(gè)全雙工的通信信道，只需Web上的一個(gè)Socket即可進(jìn)行通信，能減少不必要的網(wǎng)絡(luò)流量并降低2014-02-26HTML5 通信API 跨域門(mén)檻將不再高、數(shù)據(jù)推送也不再是夢(mèng)
HTML5新增通信相關(guān)兩個(gè)API，跨文檔消息傳輸與WEB Sockets API，跨文檔消息傳輸功能，可以在不同網(wǎng)頁(yè)文檔，不同端口（跨域情況下）進(jìn)行消息傳遞。使用web sockets api 可以2013-04-25
