vue与iframe页面数据互相通信的实现示例

更新时间：2023年12月08日 09:59:18 作者：范特西是只猫

这篇文章主要给大家介绍了vue与iframe页面数据互相通信的实现示例,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下

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页面点击发送按钮，传递事件给vue
    document.getElementById("sendBtn").addEventListener("click", () => {
        window.parent.postMessage({
            data: {
                code: "success",
                test: "我是点击iframe页面按钮后过来的数据"
            }
        }, '*');
    });

    // 监听vue页面传来的message事件
    window.addEventListener("message", (event) => {
        const data = event.data
        if (data.code === 'success') {
          alert(data.test)
        }
    }, false);
</script>

编写 vueDemo.vue 页面（完整代码），嵌入 iframeDemo.html 在实现两个页面的互相数据通信

<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发送事件
      btnClick() {
        this.iframeWin.postMessage(
          {
            code: 'success',
            test: '我是点击vue页面按钮后过来的数据!',
          },
          '*'
        )
      },
    },
    mounted() {
      // 监听iframe页面点击按钮触发事件
      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. 实现 iframe 向 vue 页面通信

点击iframe页面，通过 window.parent.postMessage 传递数据到vue页面
vue页面，通过 window.addEventListener('message') 去接收iframe传递过来的数据

实现效果如下（点击iframe页面的按钮事件，在vue页面中监听并弹窗提示）

在这里插入图片描述

在 iframeDemo.html 中新建按钮的点击事件

<button id="sendBtn">我是iframe页面按钮</button>

<script type="text/javascript">
     // iframe页面点击发送按钮，传递事件给vue
     document.getElementById("sendBtn").addEventListener("click", ()=> {
        window.parent.postMessage({
            data: {
            code:"success",
            test:"我是点击iframe页面按钮后过来的数据"
            }
        }, '*');
    });
</script>

在 vueDemo.vue 页面的 mounted 中监听iframe页面传过来的 message 事件

mounted() {
  // 监听iframe页面点击按钮触发事件
  window.addEventListener('message', (event) => {
    const data = event.data.data
    if (data.code === 'success') {
      alert(data.test)
    }
  })
},

3. 在实现 vue 向 iframe 页面通信

点击vue页面，通过 postMessage 传递数据到iframe页面
iframe页面，通过 window.addEventListener('message') 去接收vue传递过来的数据

实现效果如下（点击vue页面的按钮事件，在iframe页面中监听并弹窗提示）

在这里插入图片描述

在 vueDemo.html 中新建按钮的点击事件

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

methods: {
  // vue页面点击发送按钮，传递事件给vue
  btnClick() {
    this.iframeWin.postMessage(
      {
        code: 'success',
        test: '我是点击vue页面按钮后过来的数据',
      },
      '*'
    )
  },
},

在 iframeDemo.vue 页面的 mounted 中监听iframe页面传过来的 message 事件

// 监听vue页面传来的message事件
window.addEventListener("message", (event) => {
    const data = event.data
    if (data.code === 'success') {
      alert(data.test)
    }
}, false);

以上就是vue与iframe页面数据互相通信的实现示例的详细内容，更多关于vue与iframe页面数据通信的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue element-plus图片预览实现方法
这篇文章主要给大家介绍了关于vue element-plus图片预览实现的相关资料,最近的项目中有图片预览的场景,也是踩了一些坑,在这里总结一下,需要的朋友可以参考下
2023-07-07
vue学习记录之动态组件浅析
动态组件指的是动态切换组件的显示与隐藏,这篇文章主要给大家介绍了关于vue学习记录之动态组件的相关资料,本文通过示例代码介绍介绍的非常详细,需要的朋友可以参考下
2022-10-10
查找Vue中下标的操作(some和findindex)
这篇文章主要介绍了查找Vue中下标的操作(some和findindex)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
详解vue中v-bind:style效果的自定义指令
这篇文章主要介绍了vue中v-bind:style效果的自定义指令，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
Vue3中watch的使用详解
这篇文章主要介绍了Vue3中watch的详解,主要包括Vue2使用watch及Vue3使用watch的方法，通过多种情况实例代码相结合给大家详细讲解，需要的朋友可以参考下
2022-11-11
Vue实用功能之实现拖拽元素、列表拖拽排序
在日常开发中,特别是管理端,经常会遇到要实现拖拽排序的效果,下面这篇文章主要给大家介绍了关于Vue实用功能之实现拖拽元素、列表拖拽排序的相关资料,需要的朋友可以参考下
2022-10-10
vue-cli3项目在IE浏览器打开兼容问题及解决
这篇文章主要介绍了vue-cli3项目在IE浏览器打开兼容问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue pdf二次封装解决无法显示中文问题方法详解
这篇文章主要为大家介绍了vue pdf二次封装解决无法显示中文问题方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
Vue3中的defineExpose函数用法深入解析
这篇文章主要介绍了Vue3中的defineExpose函数用法的相关资料,defineExpose是Vue3中用于在模式下暴露组件内部属性和方法的辅助函数,它允许父组件通过ref访问子组件的暴露内容,提高组件间的交互能力并保持封装性,需要的朋友可以参考下
2025-01-01
Vuex中actions优雅处理接口请求的方法
在项目开发中，如果使用到了 vuex，通常我会将所有的接口请求单独用一个文件管理，这篇文章主要介绍了Vuex中actions如何优雅处理接口请求,业务逻辑写在 actions 中，本文给大家分享完整流程需要的朋友可以参考下
2022-11-11