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中使用Base64转码的案例
这篇文章主要介绍了在vue中使用Base64转码的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue 使用eventBus实现同级组件的通讯
这篇文章主要介绍了vue 使用eventBus实现同级组件的通讯,需要的朋友可以参考下
2018-03-03
Vue中的路由跳转(返回、刷新、跳转)
这篇文章主要介绍了Vue中的路由跳转(返回、刷新、跳转)方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
Vue 中驼峰命名与短横线分割命名的用法及区别
在 Vue 中，命名规范是一个非常重要的话题，驼峰命名和短横线分割命名都有其各自的优缺点和适用场景，开发者需要根据实际情况进行选择，这篇文章主要介绍了Vue 中驼峰命名与短横线分割命名作用及区别介绍,需要的朋友可以参考下
2023-05-05
如何使用el-table实现纯前端导出(适用于el-table任意表格)
我们日常做项目,特别是后台管理系统,常常需要导出excel文件,这篇文章主要给大家介绍了关于如何使用el-table实现纯前端导出的相关资料,本文适用于el-table任意表格,需要的朋友可以参考下
2024-03-03
ElementUI级联选择器实现同一父级下最多只能选中一个子级
本文主要介绍了ElementUI级联选择器实现同一父级下最多只能选中一个子级,同一父级下的子节点单选,又可以选择多个不同父级下的节点,具有一定参考价值,感兴趣的可以了解一下
2023-10-10
vue实现滑动和滚动效果
这篇文章主要为大家详细介绍了vue实现滑动和滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue实现多级侧边栏的封装
这篇文章主要为大家详细介绍了vue实现多级侧边栏的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
vue element el-form 多级嵌套验证的实现示例
本文主要介绍了vue element el-form 多级嵌套验证的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
vue2中组件互相调用实例methods中的方法实现详解
vue在同一个组件内,方法之间经常需要互相调用,下面这篇文章主要给大家介绍了关于vue2中组件互相调用实例methods中的方法实现的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2022-08-08