vue項(xiàng)目嵌套iframe怎么實(shí)現(xiàn)發(fā)送、接收數(shù)據(jù)

發(fā)布時(shí)間：2022-06-01 09:28:10 來源：億速云閱讀：1448 作者：iii 欄目：開發(fā)技術(shù)

這篇文章主要介紹“vue項(xiàng)目嵌套iframe怎么實(shí)現(xiàn)發(fā)送、接收數(shù)據(jù)”，在日常操作中，相信很多人在vue項(xiàng)目嵌套iframe怎么實(shí)現(xiàn)發(fā)送、接收數(shù)據(jù)問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue項(xiàng)目嵌套iframe怎么實(shí)現(xiàn)發(fā)送、接收數(shù)據(jù)”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

vue嵌套iframe發(fā)送、接收數(shù)據(jù)

<template>
    <div class="home">
        <iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame"></iframe>
    </div>
</template>

<script>
    export default {
        mounted() {
            let mapFrame = this.$refs['mapFrame']
            if (mapFrame.attachEvent){  //兼容瀏覽器判斷
                mapFrame.attachEvent("onload", function(){ 
                    let iframeWin = mapFrame.contentWindow
                    iframeWin.postMessage({
                        method: 'getBaseInfo',
                        data:'我是vuex state的數(shù)據(jù)'
                    },'*')
                })
            } else { 
                mapFrame.onload = function(){ 
                    let iframeWin = mapFrame.contentWindow
                    iframeWin.postMessage({
                        method: 'getBaseInfo',
                        data:'我是vuex state的數(shù)據(jù)'
                    },'*')
                } 
            }
            
        }
    }
</script>

<style scoped lang="stylus">
.home {
    .mapFrame {
        height: 300px;
        width: 500px;
    }
}
</style>

子頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>iframe嵌套網(wǎng)頁測試</title>
</head>
<body>
    <script>
        window.addEventListener('message',function(e){
            console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')
            console.log(e.origin,e.data)
        })  
        // window.postMessage({
        //     method:'localtest',
        //     data:'ddddddddddddddddddddddddddddd'
        // },'*')
    </script>
</body>
</html>

vue中iframe的使用

iframe在同域時(shí)能自由操作iframe和父框架的內(nèi)容(DOM)，在跨域時(shí)可以實(shí)現(xiàn)頁面跳轉(zhuǎn)。

<iframe id="iframe" :src="iframeSrc"  width="100%" frameborder="0"></iframe>

獲取iframe里面的內(nèi)容

iframe.contentWindow, 獲取iframe的window對象
iframe.contentDocument, 獲取iframe的document對象

const _iframe = document.getElementById('iframe').contentWindow

CDM跨域

如果你設(shè)置的iframe的域名和你top window的域名完全不同，可以使用CDM(cross document messaging)進(jìn)行跨域消息的傳遞。

發(fā)送消息: 使用postmessage方法

postMessage(message, targetOrigin)

message: 傳遞給iframe的內(nèi)容, 通常是string,最好不要傳object對象，需要傳對象時(shí)，使用JSON.stringfy轉(zhuǎn)換。
targetOrigin: 接受你傳遞消息的域名，可以設(shè)置絕對路徑，也可以設(shè)置""或者"/"。表示任意域名都行，"/"表示只能傳遞給同域域名。

_iframe.postMessage(JSON.stringify(_obj), '*')

接受消息: 監(jiān)聽message事件

當(dāng)targetOrigin接受到message消息之后,會觸發(fā)message事件。 message提供的event對象上有3個(gè)重要的屬性，data,origin,source.

window.addEventListener('message', function (event) {
      console.log(event)
      if (event.origin === window.callBackUrl.iframeSrc) {
        _this.childData = event.data
        console.log(event.data)
        _this.saveForm()
      }
    })

到此，關(guān)于“vue項(xiàng)目嵌套iframe怎么實(shí)現(xiàn)發(fā)送、接收數(shù)據(jù)”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

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

vue項(xiàng)目嵌套iframe怎么實(shí)現(xiàn)發(fā)送、接收數(shù)據(jù)

vue嵌套iframe發(fā)送、接收數(shù)據(jù)

vue中iframe的使用

獲取iframe里面的內(nèi)容

CDM跨域

猜你喜歡

最新資訊

相關(guān)推薦

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

vue項(xiàng)目嵌套iframe怎么實(shí)現(xiàn)發(fā)送、接收數(shù)據(jù)