Vue如何实现iframe的上一步、下一步操作

目录
  • iframe的上一步、下一步操作
    • 背景
    • 实现
  • Vue使用iframe踩坑
    • 需求
    • BUG
    • 解决方案
    • 心得

iframe的上一步、下一步操作

背景

使用Element的Tabs组件嵌入多页面，但是页面中需要实现上一步、下一步功能，如图：

实现

//父组件
        var vm = new Vue({
             el: "#app",
             data: {
                 pages: [],
                 index: 0,
                 bmbiId: 0
             },
             methods: {
                 goPageIndex(pageIndex) {
                     this.index = pageIndex;
                 }
             },
             ...
           });
        //在Vue实例外声明方法
        function goPageIndex(tab) {
            vm.goPageIndex(tab)
        }
//子组件
    <div style="text-align:center;margin:10px;">
        <el-button type="primary" @@click="handleBack" size="mini">上一步</el-button>
        <el-button type="primary" @@click="handleNext" size="mini">下一步</el-button>
    </div>
    //上一步
    handleBack() {
         window.parent.goPageIndex(1);
     },
     //下一步
     handleNext() {
          window.parent.goPageIndex(3);
      }

Vue使用iframe踩坑

需求

通过iframe写epub阅读器

由于src需要加密，所以在src拼接的时候直接调用函数获取参数

BUG

每次页面一动就会重新获取加载一次iframe，导致页面晃动

解决方案

把方法值赋值给变量，在src拼接中直接使用变量，而不是直接使用函数获取

心得

动态加载的数据，一般赋值给变量，而不要直接调取方法获取

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue组件和iframe页面的相互传参问题及解决

    vue组件和iframe页面的相互传参问题及解决

    目录 vue组件和iframe页面相互传参 vue组件调用iframe页面方法和参数 iframe页面向vue组件传参 内嵌iframe页面并进行传值 vue组件和iframe页面相互传参 目前网上大多关于iframe父子传参的博客都是在叙述父页面是html文件,子iframe文件也是html文件,涉及到父页面是vue组件子iframe页面是html的博客多数讲的不是很明白: 而最近我在项目中碰到了这种需求:在vue组件中嵌入iframe页面,并实现父子传参: vue组件调用iframe页面方法

  • Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）

    Vue实现在线预览pdf文件功能（利用pdf.js/iframe/embed）

    前言 最近在做一个精品课程,需要在线预览课件ppt,我们的思路是将ppt转换为pdf在线预览,所以问题就是如何实现在线预览pdf了. 在实现的过程中,为了更好地显示效果,我采用了多种不同的方法,最终选择效果最好的pdf.js. 实现方法: 1:iframe 采取iframe将pdf嵌入网页从而达到预览效果,想法很美好,实现很简单,但显示很残酷- 虽然一行代码简洁明了,打开谷歌浏览器效果也还行,但缺点也是十分明显的!!!! <iframe src="http......" widt

  • 在vue中实现嵌套页面(iframe)

    vue中嵌套iframe,将要嵌套的文件放在static下面.src可以使用相对路径,也可使用服务器根路径http:localhost:8088/- <iframe src="../../static/plusPro.html" width="1200" height="300" frameborder="0" scrolling="auto"style="position:absolute

  • vue项目嵌套iframe实现发送、接收数据

    目录 vue嵌套iframe发送.接收数据 vue中iframe的使用 获取iframe里面的内容 CDM跨域 vue嵌套iframe发送.接收数据 <template>     <div class="home">         <iframe src="http://127.0.0.1:8888/index.html" class="mapFrame" ref="mapFrame">&

  • 开发一个封装iframe的vue组件

    开发一个封装iframe的vue组件

    VUE的基本组成单元,我看应该是组件.用VUE开发前端项目,就是开发一个个组件,然后搭积木一样,将项目搭建出来.组件包含在页面,或者是更大的组件里面.在这里,组件与页面的界限,好像并不明显.事实上,对于单页应用,只有一个页面. 组件的好处,一是可以加强复用:二是能够将特定功能封装,利于调用:三是由于职责分明,组件高内聚,组件间低耦合,利于系统功能的优化.扩展和维护.好处多多. 开发组件,主要有2部分内容: 1.组件内部逻辑 2.外部接口 由于我这两天弄的组件,里面包含有一个<iframe>,那

  • Vue 使用iframe引用html页面实现vue和html页面方法的调用操作

    Vue 使用iframe引用html页面实现vue和html页面方法的调用操作

    当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时,我们可以使用iframe去引用html页面,实现他们的交互 首先我们可以再vue页面中使用标签引用html页面 <template> <div> <iframe name="iframeMap" id="iframeMapViewComponent" width="100%" height="470px" v-bind:src=

  • Vue如何实现iframe的上一步、下一步操作

    Vue如何实现iframe的上一步、下一步操作

    目录 iframe的上一步.下一步操作 背景 实现 Vue使用iframe踩坑 需求 BUG 解决方案 心得 iframe的上一步.下一步操作 背景 使用Element的Tabs组件嵌入多页面,但是页面中需要实现上一步.下一步功能,如图: 实现 //父组件         var vm = new Vue({              el: "#app",              data: {                  pages: [],               

  • 在vue中实现禁止回退上一步,路由不存历史记录

    在有些情况下,我们不想往路由里添加历史记录.(vue的项目,vue-router中不想存历史记录) 根据vue官网提供的,楼主总结了一下,主要有以下几种方案: 根据官网的解释 .声明式路由和编程式路由都是添加新的记录,同时vue还提供了replace来替换路由记录,从而实现路由不存历史记录的情况,以下是楼主总结的几种方法: 1.声明式路由 2.编程式 3.原生js实现 楼主晚上回去看了一下<js高程>,原生实现替换路由,不记录历史记录的方法 window.open("http://w

  • vue内嵌iframe跨域通信的实例代码

    目录 vue内嵌iframe跨域通信 1.Vue组件中如何引入iframe? 2.vue如何获取iframe对象以及iframe内的window对象? 3.vue如何向iframe内传送信息? 4.iframe内如何向外部vue发送信息? vue内嵌iframe跨域通信 1.Vue组件中如何引入iframe? <template> <div class="act-form"> <iframe :src="src"></ifr

  • Vue+Koa2 打包后进行线上部署的教程详解

    最近使用Vue和Koa2重构了自己的博客,过程中踩了不少坑,查了很多资料,最后总算成功上线.之后我计划围绕这个过程写一系列文章,讲讲如何用Vue+Koa2写一套网站. 而现在,先来讲讲最后一步,在写完Vue和Koa2后,如何将它们部署到线上. 1.将Vue和Koa2结合 很多人在打完包后就不知道怎么做了,毕竟后面都是后端的事情.如果你用的是Vue-cli3.0,那么打包这一步会非常简单,只需要执行一条命令即可,其它的不用关心: npm run build 之后会生成一个dist的文件夹,将它放到

  • 使用vue打包进行云服务器上传的问题

    vue中目录最后的vue.config.js文件中第27行的pulicpath改成./ src目录下的man.js中30到33行注释掉 将目录中的.env.development和.env.production中的 改成自己的域名和端口号 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!接下来就是打包环节了 打开vue的命令提示符 输入命令:npm run build:prod 进行打包 打包完成后会出现build目录的同级下一个出来一个打包好的文件

  • Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

    本文实例讲述了Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能.分享给大家供大家参考,具体如下: 公司要写一些为自身业务量身定制的的组件,要基于Vue,写完后扩展了一下功能,选择写图片上传是因为自己之前一直对这个功能比较迷糊,所以这次好好了解了一下.演示在网址打开后的show.gif中. 使用技术:Vue.js | node.js | express | MongoDB. github网址:https://github.com/neroneroffy/privat

  • Vue使用formData格式类型上传文件的示例

    在vue中,我们普遍是前后端分离项目,即需要使用axios等工具向后台发送请求实现对数据的操作. 其中,文件上传算是比较难的一种.这篇文章五分钟教会你上传文件. 1.如图片上传,后端需要前端传formData类型数据的情况下 <el-button type="primary" @click="uploadFile2()">点击上传</el-button> <input type="file" @change=&quo

  • Vue项目实现html5图片上传的示例代码

    Vue项目实现html5图片上传的示例代码

    目录 图例 1.选择图片 2.预览图片 2.1添加图片预览代码 两种方法的对比 3.裁剪图片 4.上传 选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片 我会以事例贯穿图片接下来,就详细的介绍每个步骤具体实现. 图例 1.选择图片 选择图片有什么好讲的呢?不就一个 input[type=file] ,然后点击就可以了吗?确实是这样的,但是,我们想要做得更加的友好一些,比如需要过滤掉非图片文件, 或只允许从摄像头拍照获取图片等,还是需要进行一些简单配置的. 下面就先来看看最简单的选

  • Vue+Node实现大文件上传和断点续传

    Vue+Node实现大文件上传和断点续传

    目录 源代码 Blob.slice 切片 初始化文件内容 FormData.append() 大文件上传 断点续传 代码 创建切片 源码 worker 线程通讯的逻辑 断点续传 秒传 源代码 断点续传.分片上传.秒传.重试机制 文件上传是开发中的难点, 大文件上传及断点续传 难点中的细节及核心技术点. element-ui 框架的上传组件,是默认基于文件流的. 数据格式:form-data: 传递的数据: file 文件流信息:filename 文件名字 通过 fileRead.readAsDa

随机推荐