vue內嵌iframe跨域通信的實例代碼

Posted on 2022-11-10 by WalkonNet

vue內嵌iframe跨域通信

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

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

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

2、vue如何獲取iframe對象以及iframe內的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內傳送信息？

通過postMessage，具體關於postMessage是什麼，自己去google，我的理解postMessage是有點類似於UDP協議，就像短信，是異步的，你發信息過去，但是沒有返回值的，隻能內部處理完成以後再通過postMessage向外部發送一個消息，外部監聽message 為瞭讓postMessage像TCP，為瞭體驗像同步的和實現多通信互不幹擾，特別制定的message結構如下

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

通過cmd來區別這條message的目的

具體代碼如下

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

4、iframe內如何向外部vue發送信息？

現在通過點擊“向iframe發送信息”這個按鈕，從外部vue中已經向iframe中發送瞭一條信息

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

那麼iframe內部如何處理這個信息呢？

<!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頁面發送信息
        window.parent.postMessage({
            cmd: 'returnHeight',
            params: {
              success: true,
              data: document.body.scrollHeight + 'px'
            }
        }, '*');
 
        // 接受父頁面發來的信息
        window.addEventListener("message", function(event){
          var data = event.data;
          switch (data.cmd) {
            case 'getFormJson':
                // 處理業務邏輯
                break;
            }
        });
    </script>
</body>
</html>

到此這篇關於vue內嵌iframe跨域通信的文章就介紹到這瞭,更多相關vue內嵌iframe跨域通信內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

vue內嵌iframe跨域通信的實例代碼

目錄