div拖动遇到iframe卡顿的问题解决

最新推荐文章于 2024-03-27 09:38:20 发布
最新推荐文章于 2024-03-27 09:38:20 发布
阅读量1.5k 收藏 6
点赞数 2
分类专栏： Html开发 文章标签： div拖动 iframe卡顿 禁用div事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010243607/article/details/109094742
版权

今天在做一个网页拖动div的需求的时候刚好遇到底下一层有个iframe

正常拖动是没有问题的,但是当拖动经过iframe的时候会明显卡顿并且把div丢掉的情况

究其原因是因为iframe也接收了鼠标事件,引起了调用变慢

解决办法是把这个iframe的事件全部取消,当移动完成后恢复这个iframe的事件监听就可以了

    //阻止底层的iframe接收事件
    var iframDiv = document.getElementById("gameFrameparent");
    iframDiv.style.pointerEvents = "none";
     iframDiv.style.pointerEvents = "auto";

不吃喵干的鱼哥
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js判断iframe内的网页是否滚动到底部触发事件
12-09
之前有个需求是要判断iframe内的网页是否滚动到底部触发事件, 网上找了许多资料都是说在当前页面下的, 索性就自己研究了一下, 找到了解决方法. clientHeight：这个元素的高度，占用整个空间的高度 offsetHeight：是指元素内容的高度 scrollTop：可以理解为滚动条可以滚动的长度 以下是源代码 代码如下: <iframe src=”~/Files/3.html” id=”iframepage” width=”825″ onload=”func()”></iframe> [removed] function func() {
vue中解决拖拽改变存在iframe的div大小时卡顿问题
10-15
然而，当涉及到在拖拽过程中改变包含iframe的div大小时，可能会遇到卡顿问题。这主要是由于iframe在拖动过程中对鼠标事件的处理，尤其是在拖动速度较快时，可能导致鼠标移动超出拖拽范围，进入iframe，触发iframe...
H5 移动端滑屏卡顿问题原因及解决方法
southone_problem
11-09 8640
加入 *{ -webkit-overflow-scrolling: touch; } -webkit-overflow-scrolling是什么东西 -webkit-overflow-scrolling控制元素在移动设备上面是否有滚动回弹效果，它可以设置成auto和touch auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具...
优化方案——用iframe嵌套网页进项目里面加载特别慢
最新发布
weixin_44867717的博客
03-27 1481
嵌套网页时，加载速度可能会受到影响，特别是当嵌套的网页与项目处于不同的域名或子域名时。嵌套网页加载缓慢的问题，提高项目的性能和用户体验。通过以上方法，你可以尝试解决。
h5 滑屏卡顿问题原因及解决方法
weixin_41439996的博客
06-21 6206
最近碰到一个问题，就是安卓滑屏的时候很流畅，IOS滑屏时有时会卡顿，后来查博客找到了解决方法，也顺便记录了下来！ 存在原因1： html,body{ height: 100%; } 解决方法：将此代码删除即可！ 存在原因2： *{ -webkit-overflow-scrolling: touch; } 解决方法：将上述css代码添加到css文件里即可！ 目前...
iframe在ios滑动不顺畅
MaRain
08-06 3135
前提最近使用了iframe做页面，发现手机端页面的效果非常不好。iOS滑动不是非常的畅通在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:<div class="scroll-wrapper"> <iframe src=""></iframe> </div> .scroll-wrapper { -webkit-overflow-scrolling: to
当鼠标拖曳事件碰到iframe（卡死了）
听海的博客
09-29 4084
当鼠标拖曳事件碰到iframe，好卡！！！
解决IOS Safari浏览器H5页面上下滑动时卡顿、页面缺失的问题
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
05-06 1589
在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况，例如下图，右图是正常页面，边是ios上下滑动后，卡顿导致如左图下面部分丢失。Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。
div被iframe遮住的几种情况及解决方法
12-10
当div使用透明的背景时，无论是使用（opacity或者rgba格式），除了chrome，其它浏览器都出现div被iframe遮住的情况。 解决方法： div使用不透明背景或者使用透明的背景图片。 第二种：ie8中z-index失效 在ie中，...
div层跨越iframe帧显示在上面的解决方法附代码
10-30
div iframe帧显示问题
iframe内嵌h5代码无法实现全屏的解决方案
阿酷tony
06-02 1445
iframe内嵌h5代码无法实现全屏的解决方案 allowfullscreen='true' <iframe src="cuplayer.html" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" > </iframe>
html5全屏iframe,iframe - 如何在全屏模式下播放HTML5游戏“Cross Browser Compatible” - 堆栈内存溢出...
weixin_29309785的博客
06-22 118
我一直在寻找在不同桌面和移动设备屏幕尺寸上播放HTML5游戏的最简单方法。此外，我希望代码在进入全屏模式时具有跨浏览器兼容性 ！我尝试了太多的解决方案，但没有按预期工作，其中一些在特定的浏览器中工作，另一个在我创建此代码并测试它到我的html5游戏之前不起作用。function goFullscreen(id) {// Add element in fullscreen modevar eleme...
css鼠标拖拉卡顿_vue中解决拖拽改变存在iframe的div大小时卡顿问题
weixin_30327815的博客
12-24 444
写在最前针对于在vue中实现拖拽改变两左右个div大小的方式，请查看上一篇文章《vue中实现拖动调整左右两侧div的宽度》。此文章主要针对于实际应用中需要拖拽改变大小的组件中使用iframe框架时存在明显卡顿的问题，比如这样，右侧div中使用了一个iframe组件，导致实际操作中出现两个问题，一个是拖不动，另外一个是无法根据鼠标移动，快速响应，甚至在监听鼠标的按下和松开事件上都有明显的卡顿问题。如...
tab选项卡中使用的iframe，如果包含大量数据，切换卡顿问题解决办法。
jun_bai的博客
10-17 1289
所有前端UI框架的TAB选项卡功能，基本都是靠display来控制切换，我的一个项目需要，其中一个选项卡中使用iframe包含的页中数据量比较大，在点击TAB选项卡时十分卡顿，而且iframe页内的滚动条，每次都会回到顶部。研究了很久终于发现是iframe的问题，如果display=none的内容中包含iframe则会重新载入。所以改用其他方式控制iframe的显示与隐藏，经过多种尝试发现z-index的方式最稳定可靠。
去掉iframe横向滚动条
zhaoxiaofei0929的专栏
05-27 506
2010年01月22日 星期五 04:59 P.M.主页面加IFRAME SCROLLING="YES"子页面让竖条消失: 让横条消失: 还要去掉子页面里的http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">两个都去掉   iframe自动适应页面大小JS函数
拖动滑块在iframe中有卡顿_还在为电脑卡顿苦恼？这样操作的人80%都解决了
weixin_39863161的博客
01-29 321
很多人使用一段时间的电脑后，电脑会出现卡顿开机慢，各种弹窗，严重拖慢了电脑的运行速度和日常使用感受，现如今流氓软件满天飞，哪怕是正规厂商的软件也有这样或那样的问题，安装360亦或者其他安全管理软件，虽然可以解决部分问题，但本身这个软件也会严重拖慢电脑的运行速度，今天告诉大家几个电脑操作小技巧，可以改善大家使用电脑的体验电脑启动慢？自启动软件太多，一个一个设置太慢，不知道如何快速关闭？同时按住徽标键...
iframe出现滚动条问题
前端
08-12 7900
问题描述 .parent设定了高度，设置iframe height：100%,通过浏览器观察发现，外层div与iframe高度相同，为什么出现滚动条，发现没有padding/margin的影响 <div class="parent"> <iframe frameborder="no" style="width:100%;height:100%;" src="https://w...
关于移动端上下滑动卡顿不流畅现象的解决方案
aiting4826的博客
07-30 1246
添加一个属性： -webkit-overflow-scrolling: touch -webkit-overflow-scrolling控制元素在移动设备上面是否有滚动回弹效果，它可以设置成auto和touch IOS 端特属属性，手指离开屏幕会保持滚动一段距离，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。 overflow: scroll; //该属性...
关于html5拖拽中的一些坑
百岁如流富贵冷灰的博客
05-30 6044
难受，上头交代做的页面里有个拖拽的功能，网上其实有许多好用的拖拽插件，但是本着不拿嗟来之食，毅然决然的选择使用原生的js拖拽API，然后被坑惨了。。。。 1.首先是从body下拖拽到iframe中的     ☆需要注意，当使用a标签的target属性进行iframe切换时，iframe标签的src属性是不会变化的 &lt;a href="1.html" target="iframe"&gt...
vue拖拽div边框调整大小卡顿如何解决
05-26
Vue拖拽div边框调整大小卡顿可能是由于频繁地重新渲染元素造成的。为了解决这个问题，可以考虑使用Vue的指令来实现拖拽调整大小的功能，而不是在模板中直接绑定事件。另外，可以通过debounce或throttle函数来限制触发频率，减少重复渲染的次数，从而提高性能。 以下是一个简单的示例代码： ```html <div v-dragresize="{handler: onResize}"> <!-- content --> </div> ``` ```javascript Vue.directive('dragresize', { bind: function (el, binding, vnode) { let handler = binding.value.handler; let debounce = binding.value.debounce || 100; let throttle = binding.value.throttle || 0; let startX = 0; let startY = 0; let startW = 0; let startH = 0; let resizeHandler = function (e) { let dx = e.clientX - startX; let dy = e.clientY - startY; let newW = startW + dx; let newH = startH + dy; if (newW < 0) newW = 0; if (newH < 0) newH = 0; handler({width: newW, height: newH}); }; let mouseDownHandler = function (e) { startX = e.clientX; startY = e.clientY; startW = el.clientWidth; startH = el.clientHeight; document.addEventListener('mousemove', resizeHandler); document.addEventListener('mouseup', mouseUpHandler); }; let mouseUpHandler = function (e) { document.removeEventListener('mousemove', resizeHandler); document.removeEventListener('mouseup', mouseUpHandler); }; el.addEventListener('mousedown', debounce ? _.debounce(mouseDownHandler, debounce) : mouseDownHandler, throttle); } }); new Vue({ el: '#app', data: { width: 200, height: 200 }, methods: { onResize: function ({width, height}) { this.width = width; this.height = height; } } }); ``` 在这个示例中，我们定义了一个名为`v-dragresize`的指令，并将一个名为`onResize`的方法作为参数传递给它。当用户在元素上按下鼠标时，我们记录下当前的鼠标位置和元素的宽高，并将一个`mousemove`事件绑定到`document`上。在`mousemove`事件处理程序中，我们计算出当前鼠标位置与起始位置之间的差值，并根据差值调整元素的宽高。最后，我们将新的宽高值作为参数传递给`onResize`方法。 注意，我们使用了`_.debounce`函数来限制`mousedown`事件的触发频率。这样可以防止用户快速点击元素时频繁地触发重复渲染。你需要在使用这个指令时将`lodash`库引入你的项目中，或者使用自己的`debounce`函数来代替。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值