快捷導(dǎo)航

vue內(nèi)嵌iframe跨域通信的實例代碼

更新時間：2022年11月08日 17:08:26 作者：buling的大喬

這篇文章主要介紹了vue內(nèi)嵌iframe跨域通信,主要介紹了Vue組件中如何引入iframe，vue如何獲取iframe對象以及iframe內(nèi)的window對象，結(jié)合實例代碼給大家介紹的非常詳細(xì)需要的朋友可以參考下

vue內(nèi)嵌iframe跨域通信

1、Vue組件中如何引入iframe？

<template>
  <div class="act-form">
    <iframe :src="src"></iframe>
  </div>
</template>
 
<script>
 
export default {
  data () {
    return {
      src: '你的src'
    }
  }
}
</script>

如上，直接通過添加iframe標(biāo)簽，src屬性綁定data中的src，第一步引入就完成了

2、vue如何獲取iframe對象以及iframe內(nèi)的window對象？

在vue中，dom操作比不上jquery的$('#id')來的方便，但是也有辦法，就是通過ref

<template>
  <div class="act-form">
    <iframe :src="src" ref="iframe"></iframe>
  </div>
</template>
 
<script>
 
export default {
  data () {
    return {
      src: '你的src'
    }
  },
  mounted () {
    // 這里就拿到了iframe的對象
    console.log(this.$refs.iframe)
  }
}
</script>

然后就是獲取iframe的window對象，因為只有拿到這個對象才能向iframe中傳東西

<template>
  <div class="act-form">
    <iframe :src="src" ref="iframe"></iframe>
  </div>
</template>
 
<script>
 
export default {
  data () {
    return {
      src: '你的src'
    }
  },
  mounted () {
    // 這里就拿到了iframe的對象
    console.log(this.$refs.iframe)
    // 這里就拿到了iframe的window對象
    console.log(this.$refs.iframe.contentWindow)
  }
}
</script>

3、vue如何向iframe內(nèi)傳送信息？

通過postMessage，具體關(guān)于postMessage是什么，自己去google，我的理解postMessage是有點類似于UDP協(xié)議，就像短信，是異步的，你發(fā)信息過去，但是沒有返回值的，只能內(nèi)部處理完成以后再通過postMessage向外部發(fā)送一個消息，外部監(jiān)聽message 為了讓postMessage像TCP，為了體驗像同步的和實現(xiàn)多通信互不干擾，特別制定的message結(jié)構(gòu)如下

{
  cmd: '命令',
  params: {
    '鍵1': '值1',
    '鍵2': '值2'
  }
}

通過cmd來區(qū)別這條message的目的

具體代碼如下

<template>
  <div class="act-form">
    <iframe :src="src" ref="iframe"></iframe>
    <div @click="sendMessage">向iframe發(fā)送信息</div>
  </div>
</template>
 
<script>
 
export default {
  data () {
    return {
      src: '你的src',
      iframeWin: {}
    }
  },
  methods: {
    sendMessage () {
      // 外部vue向iframe內(nèi)部傳數(shù)據(jù)
      this.iframeWin.postMessage({
        cmd: 'getFormJson',
        params: {}
      }, '*')
    },
  },
  mounted () {
    // 在外部vue的window上添加postMessage的監(jiān)聽，并且綁定處理函數(shù)handleMessage
    window.addEventListener('message', this.handleMessage)
    this.iframeWin = this.$refs.iframe.contentWindow
  },
  handleMessage (event) {
    // 根據(jù)上面制定的結(jié)構(gòu)來解析iframe內(nèi)部發(fā)回來的數(shù)據(jù)
    const data = event.data
    switch (data.cmd) {
      case 'returnFormJson':
        // 業(yè)務(wù)邏輯
        break
      case 'returnHeight':
        // 業(yè)務(wù)邏輯
        break
    }
  }
}
</script>

4、iframe內(nèi)如何向外部vue發(fā)送信息？

現(xiàn)在通過點擊“向iframe發(fā)送信息”這個按鈕，從外部vue中已經(jīng)向iframe中發(fā)送了一條信息

{
  cmd: 'getFormJson',
  params: {}
}

那么iframe內(nèi)部如何處理這個信息呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>iframe Window</title>
    <style>
        body {
            background-color: #D53C2F;
            color: white;
        }
    </style>
</head>
<body>
 
    <h1>Hello there, i'm an iframe</h1>
 
    <script>
        // 向父vue頁面發(fā)送信息
        window.parent.postMessage({
            cmd: 'returnHeight',
            params: {
              success: true,
              data: document.body.scrollHeight + 'px'
            }
        }, '*');
 
        // 接受父頁面發(fā)來的信息
        window.addEventListener("message", function(event){
          var data = event.data;
          switch (data.cmd) {
            case 'getFormJson':
                // 處理業(yè)務(wù)邏輯
                break;
            }
        });
    </script>
</body>
</html>

到此這篇關(guān)于vue內(nèi)嵌iframe跨域通信的文章就介紹到這了,更多相關(guān)vue內(nèi)嵌iframe跨域通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: