vue與iframe頁面數(shù)據(jù)互相通信的實現(xiàn)示例

更新時間：2023年12月08日 09:59:18 作者：范特西是只貓

這篇文章主要給大家介紹了vue與iframe頁面數(shù)據(jù)互相通信的實現(xiàn)示例,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

1. 搭建 html 頁面和 vue 頁面

暫定為 iframeDemo.html 和 vueDemo.vue 頁面

在這里插入圖片描述

編寫 iframeDemo.html 頁面（完整代碼）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .box {
            width: 100%;
            height: 200px;
            border: 2px solid #000;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="box">
        <button id="sendBtn">我是iframe頁面按鈕</button>
    </div>
</body>

</html>

<script type="text/javascript">
    // iframe頁面點擊發(fā)送按鈕，傳遞事件給vue
    document.getElementById("sendBtn").addEventListener("click", () => {
        window.parent.postMessage({
            data: {
                code: "success",
                test: "我是點擊iframe頁面按鈕后過來的數(shù)據(jù)"
            }
        }, '*');
    });

    // 監(jiān)聽vue頁面?zhèn)鱽淼膍essage事件
    window.addEventListener("message", (event) => {
        const data = event.data
        if (data.code === 'success') {
          alert(data.test)
        }
    }, false);
</script>

編寫 vueDemo.vue 頁面（完整代碼），嵌入 iframeDemo.html 在實現(xiàn)兩個頁面的互相數(shù)據(jù)通信

<template>
  <div class="home">
    <div class="body">
      <iframe src="/iframeDemo.html" ref="iframe" frameborder="0" width="100%" height="4  00px" />
      <el-button @click="btnClick">我是vue頁面按鈕</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      // 給iframe發(fā)送事件
      btnClick() {
        this.iframeWin.postMessage(
          {
            code: 'success',
            test: '我是點擊vue頁面按鈕后過來的數(shù)據(jù)!',
          },
          '*'
        )
      },
    },
    mounted() {
      // 監(jiān)聽iframe頁面點擊按鈕觸發(fā)事件
      window.addEventListener('message', (event) => {
        const data = event.data.data
        if (data.code === 'success') {
          alert(data.test)
        }
      })
      this.iframeWin = this.$refs.iframe.contentWindow
    },
  }
</script>

<style scoped lang="scss">
  .home {
    .body {
      width: 890px;
      height: 100%;
      border: #ff3366 solid 10px;
      box-sizing: border-box;
      box-sizing: border-box;
      padding: 20px;
    }
  }
</style>

2. 實現(xiàn) iframe 向 vue 頁面通信

點擊iframe頁面，通過 window.parent.postMessage 傳遞數(shù)據(jù)到vue頁面
vue頁面，通過 window.addEventListener('message') 去接收iframe傳遞過來的數(shù)據(jù)

實現(xiàn)效果如下（點擊iframe頁面的按鈕事件，在vue頁面中監(jiān)聽并彈窗提示）

在這里插入圖片描述

在 iframeDemo.html 中新建按鈕的點擊事件

<button id="sendBtn">我是iframe頁面按鈕</button>

<script type="text/javascript">
     // iframe頁面點擊發(fā)送按鈕，傳遞事件給vue
     document.getElementById("sendBtn").addEventListener("click", ()=> {
        window.parent.postMessage({
            data: {
            code:"success",
            test:"我是點擊iframe頁面按鈕后過來的數(shù)據(jù)"
            }
        }, '*');
    });
</script>

在 vueDemo.vue 頁面的 mounted 中監(jiān)聽iframe頁面?zhèn)鬟^來的 message 事件

mounted() {
  // 監(jiān)聽iframe頁面點擊按鈕觸發(fā)事件
  window.addEventListener('message', (event) => {
    const data = event.data.data
    if (data.code === 'success') {
      alert(data.test)
    }
  })
},

3. 在實現(xiàn) vue 向 iframe 頁面通信

點擊vue頁面，通過 postMessage 傳遞數(shù)據(jù)到iframe頁面
iframe頁面，通過 window.addEventListener('message') 去接收vue傳遞過來的數(shù)據(jù)

實現(xiàn)效果如下（點擊vue頁面的按鈕事件，在iframe頁面中監(jiān)聽并彈窗提示）

在這里插入圖片描述

在 vueDemo.html 中新建按鈕的點擊事件

<el-button @click="btnClick">我是vue頁面按鈕</el-button>

methods: {
  // vue頁面點擊發(fā)送按鈕，傳遞事件給vue
  btnClick() {
    this.iframeWin.postMessage(
      {
        code: 'success',
        test: '我是點擊vue頁面按鈕后過來的數(shù)據(jù)',
      },
      '*'
    )
  },
},

在 iframeDemo.vue 頁面的 mounted 中監(jiān)聽iframe頁面?zhèn)鬟^來的 message 事件

// 監(jiān)聽vue頁面?zhèn)鱽淼膍essage事件
window.addEventListener("message", (event) => {
    const data = event.data
    if (data.code === 'success') {
      alert(data.test)
    }
}, false);

以上就是vue與iframe頁面數(shù)據(jù)互相通信的實現(xiàn)示例的詳細內(nèi)容，更多關(guān)于vue與iframe頁面數(shù)據(jù)通信的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: