html5中怎么解決外鏈嵌入頁面通信問題

發(fā)布時(shí)間：2021-05-14 10:17:37 來源：億速云閱讀：184 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)html5中怎么解決外鏈嵌入頁面通信問題的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

使用postMessage推送和window.addEventListener接收
原理：

發(fā)送方使用postMessage方法向接收方推送消息，第一個(gè)參數(shù)為推送的內(nèi)容，第二個(gè)參數(shù)是允許被訪問的域名；

接收方通過監(jiān)聽message的方法接收數(shù)據(jù)。

實(shí)現(xiàn)跨域就需要有兩個(gè)不同源的服務(wù)器咯

開始

iframe引入頁面（我也是使用這樣方式）

父頁面（發(fā)送方）

<script>
//這里是發(fā)送監(jiān)聽
        function btnClick(params) {
            console.log(1111)
            var iframe = document.getElementById("childframe")
            iframe.contentWindow.postMessage({
                text:'你收到了沒有呀（白天）',
                action : 'light'  // action : 自定義動作參數(shù)，用于接受收消息是的判斷
             }, 'http://localhost:8000/#/');
           
        }
   
        function btnClick2(params) {
            console.log(2222)
            var iframe = document.getElementById("childframe")
            iframe.contentWindow.postMessage({
                text:'你收到了沒有呀（黑夜）',
                action : 'dark'  // action : 自定義動作參數(shù)，用于接受收消息是的判斷
             }, 'http://localhost:8000/#/');
             
    //這是接收子頁面返回的監(jiān)聽（當(dāng)時(shí)也是被各種文章搞的很懵圈呀，如果只父頁面發(fā)送消息不需要在接收子頁面的反饋可以不用寫這些）
     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()">點(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ā)送簡單解釋一波：

<iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width="1400px" height="800px">

這里里面的src是子頁面的地址（這里是根據(jù)你自己寫的路由或者那個(gè)頁面要監(jiān)聽寫的地址）。

postMessage({ text:'你收到了沒有呀（黑夜）', action : 'dark' }, 'http://localhost:8000/#/')

第一個(gè)參數(shù)是內(nèi)容，第二是子頁面的地址，這里可以只寫項(xiàng)目地址就可以還有寫的（例如：postMessage(‘內(nèi)容’, '')），我是沒試過但應(yīng)該也可以。

子頁面（接收方+反饋）

我這邊接收是直接在我但react項(xiàng)目里寫的

 componentWillMount() {
    window.addEventListener('message', (e) => {
      console.log(e)
      let data= e.data //這就是接收到的數(shù)據(jù)
                       //e.origin這是發(fā)送數(shù)據(jù)的地址
   })
   
   ...
   ...
   ...
   //關(guān)于反饋我是在我項(xiàng)目里寫了一個(gè)點(diǎn)擊動作發(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)兩種反饋，父頁面都能收到
注意是用 window.top.postMessage反饋

感謝各位的閱讀！關(guān)于“html5中怎么解決外鏈嵌入頁面通信問題”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

html5中怎么解決外鏈嵌入頁面通信問題

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽