溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關html5中怎么解決外鏈嵌入頁面通信問題的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
使用postMessage推送和window.addEventListener接收
原理：
發送方使用postMessage方法向接收方推送消息，第一個參數為推送的內容，第二個參數是允許被訪問的域名；
接收方通過監聽message的方法接收數據。
實現跨域就需要有兩個不同源的服務器咯
開始
iframe引入頁面（我也是使用這樣方式）
父頁面（發送方）
<script>
//這里是發送監聽
function btnClick(params) {
console.log(1111)
var iframe = document.getElementById("childframe")
iframe.contentWindow.postMessage({
text:'你收到了沒有呀（白天）',
action : 'light' // action : 自定義動作參數，用于接受收消息是的判斷
}, 'http://localhost:8000/#/');
}
function btnClick2(params) {
console.log(2222)
var iframe = document.getElementById("childframe")
iframe.contentWindow.postMessage({
text:'你收到了沒有呀（黑夜）',
action : 'dark' // action : 自定義動作參數，用于接受收消息是的判斷
}, 'http://localhost:8000/#/');
//這是接收子頁面返回的監聽（當時也是被各種文章搞的很懵圈呀，如果只父頁面發送消息不需要在接收子頁面的反饋可以不用寫這些）
window.addEventListener('message', function (e) {
alert(e.data)
const data = e.data;
console.log(data,'接到你的頁面了data')
})
//下面這些都是踩過的坑
// var iwindow = iframe.contentWindow;
// var idoc = iwindow.document;
// console.log("window",iwindow);//獲取iframe的window對象
// 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()">點擊</button>
<br/>
<button onclick="btnClick2()">點擊</button>
<iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width="1400px" height="800px">
</body>關于發送簡單解釋一波：
<iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width="1400px" height="800px">
這里里面的src是子頁面的地址（這里是根據你自己寫的路由或者那個頁面要監聽寫的地址）。
postMessage({ text:'你收到了沒有呀（黑夜）', action : 'dark' }, 'http://localhost:8000/#/')第一個參數是內容，第二是子頁面的地址，這里可以只寫項目地址就可以還有寫的（例如：postMessage(‘內容’, '')），我是沒試過但應該也可以。
子頁面（接收方+反饋）
我這邊接收是直接在我但react項目里寫的
componentWillMount() {
window.addEventListener('message', (e) => {
console.log(e)
let data= e.data //這就是接收到的數據
//e.origin這是發送數據的地址
})
...
...
...
//關于反饋我是在我項目里寫了一個點擊動作發送的如下
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+'"}', '*')
}關于上面接收反饋解釋一波：
1、 接收 window.addEventListener('message', (e) => {console.log(e) })
其中e是整個接收到的消息體里面有很多內容，自己拿使用的數據，注意這里應該加判斷符合條件后在進行一些操作
2、發送方式，我自己實驗兩種反饋，父頁面都能收到
注意是用 window.top.postMessage反饋
感謝各位的閱讀！關于“html5中怎么解決外鏈嵌入頁面通信問題”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
