Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信

简介: Vue中 使用 iframe 嵌入本地 HTML 页面 并 相互通信

1. 使用 iframe 嵌入本地 HTML 页面

在 public 文件夹下新建 static 文件夹,然后将 html 文件及相关引用拷贝到 static 文件夹下。

2020062310470442.png

<template>
  <div class="wrap">
    <iframe 
      ref="iframe" 
      :src="htmlSrc" 
      width="100%" 
      height="50%" 
      frameborder="0">
    </iframe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      htmlSrc:'static/test.html', // 注意: 直接写 static ,前面不需要加任何路径和字符。
    };
  },
};
</script>
<style lang="scss" scoped>
.wrap{
  width: 100%;
  height: 500px;
}
</style>

2. 相互通信

vue 文件完整代码

<template>
  <div class="wrap">
    <iframe 
      ref="iframe" 
      :src="htmlSrc" 
      width="100%" 
      height="50%" 
      frameborder="0">
    </iframe>
    <button @click="vueSendMsg">vue向iframe传递信息</button>
    <button @click="iframeMethods">触发iframe中的方法</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      htmlSrc:'static/test.html',
    };
  },
  methods: {
    // vue获取iframe传递过来的信息
    getiframeMsg(event){
      const res = event.data;
      console.log(event)
      if(res.cmd == 'myIframe'){
        console.log(res)
      }
    },
    // vue向iframe传递信息
    vueSendMsg(){
      const iframeWindow = this.$refs.iframe.contentWindow;
      iframeWindow.postMessage({ 
        cmd:'myVue',
        params : {
          info: 'Vue向iframe传递的消息',
        } 
      },'*')
    },
    // 触发iframe中的方法
    iframeMethods(){
      this.$refs.iframe.contentWindow.triggerByVue('通过Vue触发iframe中的方法');
    },
  },
  mounted() {
    window.addEventListener('message',this.getiframeMsg)
  },
};
</script>
<style lang="scss" scoped>
.wrap{
  width: 100%;
  height: 500px;
}
</style>

html 文件完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3>iframe嵌入的页面</h3>
  <button onclick="iframeSendMsg()">iframe向Vue传消息</button>
</body>
<script type="text/javascript">
  // iframe向vue传递信息
  function iframeSendMsg(){
    window.parent.postMessage({ 
      cmd:'myIframe',
      params : {
        info: 'iframe向Vue传递的消息',
      } 
    },'*');
  };
  // iframe获取Vue传递过来的信息
  window.addEventListener("message", getVueMsg);
  function getVueMsg(event){
    const res = event.data;
    if(res.cmd == 'myVue'){
      console.log(res)
    }
  };
  function triggerByVue(msg){
    console.log(msg)
  }
</script>
</html>

2020062310470442.png

  • e.source – 消息源,消息的发送窗口 / iframe;
  • e.origin – 消息源的 URI(可能包含协议、域名和端口),用来验证数据源;
  • e.data – 发送过来的数据;

3. 拓展知识

关于 Window postMessage() 方法

定义和用法:

postMessage() 方法用于安全地实现跨源通信。

语法:

otherWindow.postMessage(message, targetOrigin, [transfer]);

image.png

关于 Window parent 属性

定义和用法:

parent属性返回当前窗口的父窗口。

语法:

window.parent

传送门:Vue中 iframe 的内容加载慢,实现加载(Loading)效果

相关文章
|
15天前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
|
14天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
14天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中,不同组件之间传递数据和事件的方法。常用的方式有:props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
|
24天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
42 2
|
8天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
24 0
|
数据库
基于springboot+mybatisplus+vue的课程学分管理系统
基于springboot+mybatisplus+vue的课程学分管理系统
137 0
基于springboot+mybatisplus+vue的课程学分管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
基于Springboot+MybatisPlus+Vue的在线课程管理系统
141 0
基于Springboot+MybatisPlus+Vue的在线课程管理系统
|
JavaScript 前端开发 Java
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
235 0
基于Springboot+MybatisPlus+Vue的前后端分离的学生选课课程教务管理系统
|
前端开发 Java 关系型数据库
前后端分离Springboot+Vue实现课程社区管理系统
本项目主要实现一个基于课程选课的社区交流系统,主要的业务背景为每个老师可以自己开设相应的选修课,并指定可以选修的人数,学生登陆系统后可以进行选课,并可以在线针对自己的选课进行在线讨论,点赞等互动行为。管理员则主要是对基本信息的相关管理,比如用户和角色、权限管理等,本系统有着完备的权限管理控制系统,可以根据需要自定角色并分配相应的权限。系统采用前后端分离开发的方式来实现。
181 0
前后端分离Springboot+Vue实现课程社区管理系统
|
JavaScript
Vue课程52命令v-if和v-show的区别
Vue课程52命令v-if和v-show的区别
136 0
Vue课程52命令v-if和v-show的区别