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)效果

相关文章
|
2月前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
132 2
|
5天前
|
JavaScript 前端开发 安全
vue -- 指令 -- v-text/html/on/show/if/bind/for/model
【10月更文挑战第17天】Vue 指令是构建 Vue 应用的基础工具,掌握它们的特性和用法是成为一名优秀 Vue 开发者的重要一步。通过深入理解和熟练运用这些指令,可以打造出更加出色的前端应用。
8 2
|
8天前
|
存储 JavaScript
Vue 组件间通信的方式有哪些?
Vue组件间通信主要通过Props、Events、Provide/Inject、Vuex(状态管理)、Ref、Event Bus等实现,支持父子组件及跨级组件间的高效数据传递与状态共享。
|
27天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
46 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(10)嵌入Table
本文介绍了如何在Twaver HTML5中嵌入表格(Table),并设置表格的列(Column)和样式。通过示例代码展示了如何在React组件中创建表格并添加数据,以及如何通过样式设置表格元素的颜色。
37 2
Twaver-HTML5基础学习(10)嵌入Table
|
21天前
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
28 3
|
2天前
|
JavaScript UED
"Vue实战技巧大揭秘:一招解决路由跳转页面不回顶部难题,让你的单页面应用用户体验飙升!"
【10月更文挑战第23天】在Vue单页面应用中,点击路由跳转时,默认情况下页面不会自动滚动到顶部,这可能影响用户体验。本文通过一个新闻网站的案例,介绍了如何使用Vue-router的全局前置守卫和`scrollBehavior`方法,实现路由跳转时页面自动滚动到顶部的功能,提升用户浏览体验。
13 0
|
27天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
17 1
|
14天前
|
JavaScript 前端开发 容器
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
Vue生成PDF文件攻略:html2canvas与jspdf联手,中文乱码与自动换行难题攻克
20 0
|
14天前
|
JavaScript 前端开发 安全
如何在 Vue 页面中禁止选择、右键、复制及 F12 开发者工具
【10月更文挑战第3天】 在前端开发中,保护页面内容不被随意复制或查看是一个常见需求。本文介绍了如何在 Vue 应用中实现禁止文本选择、右键菜单、复制操作以及 F12 开发者工具的方法。通过结合 CSS 和 JavaScript 事件监听,我们可以增加用户查看和复制内容的难度,尽管无法完全阻止高级用户。适当的防护措施可以为内容提供一层额外的保护,帮助开发者提升页面安全性。
262 0