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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
Javascript变量作用域详解
Dec 06 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
详解node中创建服务进程
May 09 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
基于jquery的超简单上下翻
2010/04/20 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python paramiko实现ssh远程访问的方法
2013/12/03 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Python笔记之facade模式
2019/11/20 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
python实现的分层随机抽样案例
2020/02/25 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
中科软测试工程师面试题
2012/06/16 面试题
语文课外活动总结
2014/08/27 职场文书
干部作风建设工作总结
2014/10/29 职场文书
少年犯观后感
2015/06/11 职场文书
如何写观后感
2015/06/19 职场文书
Python OpenCV快速入门教程
2021/04/17 Python
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers