vue中解决拖拽改变存在iframe的div大小时卡顿问题


Posted in Javascript onJuly 22, 2020

写在最前

针对于在vue中实现拖拽改变两左右个div大小的方式,请查看上一篇文章《vue中实现拖动调整左右两侧div的宽度》。此文章主要针对于实际应用中需要拖拽改变大小的组件中使用iframe框架时存在明显卡顿的问题,比如这样,右侧div中使用了一个iframe组件,导致实际操作中出现两个问题,一个是拖不动,另外一个是无法根据鼠标移动,快速响应,甚至在监听鼠标的按下和松开事件上都有明显的卡顿问题。如果去除右侧iframe框架,则没有问题。

有iframe情况

vue中解决拖拽改变存在iframe的div大小时卡顿问题

无iframe情况

vue中解决拖拽改变存在iframe的div大小时卡顿问题

vue中解决拖拽改变存在iframe的div大小时卡顿问题

问题原因&解决思路

问题原因我不知道,不过这个博客给了我解决思路《解决jqueryUI的拖拽,如果元素中含有iframe,拖动卡的问题》,还有以下说法,他们的解决思路一样的。因此我猜想是鼠标的监听造成的影响,在我们拖拽的时候,因为拖拽过快,很容易出现鼠标移动超过拖拽范围的情况,此时的鼠标可能已经在iframe上方,从而会同时加载iframe中的内容,导致出现卡顿。

总之,解决的思路就是在拖动的时候,在iframe上方添加一个透明的遮罩层,然后在停止拖拽的时候让其消失。这样问题就可以完美解决了。

vue中解决拖拽改变存在iframe的div大小时卡顿问题

解决方式共有两节,一节包含我解决过程中遇到的问题,一节是直接的解决方式,如果想直接查看解决方式的,请直接跳转至解决方式那一节

解决方式(含解决过程中遇到的问题)

HTML组件部分源代码

这是实现拖拽的组件代码,如果不了解我原本使用的实现方式,请参考《vue中实现拖动调整左右两侧div的宽度》

<div class="box" ref="box">
   <div class="left" ref="left">

   </div>
   <div class="resize" ref="resize" title="收缩侧边栏">
    ⋮
   </div>
   <div class="mid" ref="mid">
    <!--在此处添加遮罩层-->
    <iframe id="iFrame1" name="iFrame1" width="100%" height="100%" frameborder="0" scrolling="auto"
      :src="iframeUrl">
    </iframe>
   </div>
  </div>

添加遮罩层

在以上标注的地方,添加如下代码

<div class="iframeDiv"></div>

再添加遮罩层的css样式即可,此时最好测试点击一下,是不是原来的ifame部分已经不能点击,而且拖拽起来已经不再卡顿了

/* 添加透明遮罩层 */ 
.iframeDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1111;
  filter: alpha(opacity=0);
  opacity: 0;
  background: transparent;
  margin-top: 30px;
  /*display: none;*/
 }

实现遮罩层在拖拽时出现

我的解决办法是直接在拖拽区域添加监听鼠标的按下和松开事件,按下后遮罩层出现,松开后消失,因此修改resize部分,添加onmouseup&mousedown,分别传入参数,用于修改iframeDiv的css样式中的display属性值

<div class="resize" ref="resize" @mousedown="changeIframeDivStyle('')" @onmouseup="changeIframeDivStyle('none')" >
⋮
 </div>

然后添加changeIframeDivStyle方法,因为getElementByClassName返回的是个数组集合,但是我又确认自己页面只有一个iframeDiv,所以选择了iframe[0],如果想使用getElementById也可以

changeIframeDivStyle(display) {
    var iframeDiv = document.getElementsByClassName('iframeDiv');
    iframeDiv[0].style.display = display;
   },

到此基本就算完成大半了,mousedown为鼠标按下事件,按下后设置display为空,即遮罩层出现,onmouseup为鼠标松开事件,松开后遮罩层消失,达到不影响用户操作查看iframe中内容的目的

页面初始化时遮罩层设置问题

按照实际来讲,初始化进入页面时,我们就不应该留有遮罩层,所以按照我的想法来讲,就是直接在css中修改样式,但是如上所见,我把它注释掉了,至于为什么,先卖个关子,大家修改后尝试一下,看看拖拽时卡顿不卡顿

display: none;

在我本以为这样就可以解决问题时,我发现,首次进入页面,直接进行拖拽,依旧会存在卡顿,但是拖拽过一次之后,就不会再有问题了。这个问题,,我又不知道为什么了,于是,既然它需要拖拽一次之后才不会卡顿,那我就直接注释掉了css中这个display样式,反而在 mounted中添加方法,这样反而成功了,虽然搞不明白两者的差距,但是问题总算是解决了,如果有知道原因的朋友,可以在评论中分享出来,供大家学习学习。

this.changeIframeDivStyle('none');

解决方式

在iframe上添加透明遮罩层样式

<div class="box" ref="box">
   <div class="left" ref="left">

   </div>
   <div class="resize" ref="resize" title="收缩侧边栏">
    ⋮
   </div>
   <div class="mid" ref="mid">
    <!--在此处添加遮罩层-->
   <div class="iframeDiv"></div>
    <iframe id="iFrame1" name="iFrame1" width="100%" height="100%" frameborder="0" scrolling="auto"
      :src="iframeUrl">
    </iframe>
   </div>
  </div>

添加CSS样式

.iframeDiv {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1111;
  filter: alpha(opacity=0);
  opacity: 0;
  background: transparent;
  margin-top: 30px;
  /*display: none;*/
 }

添加鼠标的监听事件

在拖拽区添加鼠标的按下事件和松开事件

<div class="resize" ref="resize" @mousedown="changeIframeDivStyle('')" @onmouseup="changeIframeDivStyle('none')" >
⋮
 </div>

添加方法

changeIframeDivStyle(display) {
    var iframeDiv = document.getElementsByClassName('iframeDiv');
    iframeDiv[0].style.display = display;
   },

设置页面初始化加载

this.changeIframeDivStyle('none');

到此这篇关于vue中解决拖拽改变存在iframe的div大小时卡顿问题的文章就介绍到这了,更多相关vue拖拽div卡顿内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 构造函数方式定义对象
Jan 02 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
javascript标准库(js的标准内置对象)总结
May 26 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 #Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 #Javascript
vue项目中使用多选框的实例代码
Jul 22 #Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 #Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 #Javascript
js实现查询商品案例
Jul 22 #Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 #Javascript
You might like
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
jquery 元素相对定位代码
2010/10/15 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
教你用javascript实现随机标签云效果_附代码
2016/03/16 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
Vue Socket.io源码解读
2018/02/07 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
解决Django no such table: django_session的问题
2020/04/07 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
船舶专业个人求职信范文
2014/01/02 职场文书
小学英语教学反思
2014/01/30 职场文书
学校师德师风整改方案
2014/10/28 职场文书
2015年春节标语口号
2014/12/09 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
PO模式在selenium自动化测试框架的优势
2022/03/20 Python
Python实现自动玩连连看的脚本分享
2022/04/04 Python