swiper和iframe结合导致不能滑动的解决办法

最新推荐文章于 2023-05-26 11:42:25 发布

o猜拳0

最新推荐文章于 2023-05-26 11:42:25 发布

阅读量5.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签： swiper iframe swiper与iframe结合产生的问题

本文链接：https://blog.youkuaiyun.com/qq_38878455/article/details/80684836

本文介绍了解决Swiper在iframe中无法检测到滑动事件的问题，并提供了两种解决方案：一是通过CSS禁用pointer-events；二是给iframe内的页面添加触摸监听事件实现滑动切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两星期之前遇到的这个问题，百度后没有解决这个问题，今天在别人的帮助下，解决了。

两者相结合，百度出来的原因是：iframe里是另一个网页，所以swiper检测不到内页的事件。

有两种解决办法：

一种是设置样式 pointer-events: none; 但iframe里面所有事件将不能点击包括 a链接,但是可以滑动。

第二种方法就是参照百度出来的结果，给iframe的页面添加监听事件,可以点击也可以滑动。

//index 是swiper的下标,sum是我嵌套了几个iframe页面
    var index;
    var sum;
    //因为我的需求是左右滑动，所以上下滑动的监听看需求
    var startX,startY,endX,endY,distanceX,distanceY;
    //iframeId  就是iframe的id
    var iframe = $("#iframeId").prop('contentWindow').document;
    iframe.addEventListener('touchstart',function (e) {
        startX = e.targetTouches[0].pageX;
        startY = e.targetTouches[0].pageY;
    });
    iframe.addEventListener('touchemove',function (e) {
        endX = e.targetTouches[0].pageX;
        endY = e.targetTouches[0].pageY;
        distanceX = endX - startX;
        distanceY = endY - startY;
        //后面的判断条件根据情况添加以及判断
        //增加与Y轴的比较是当往上滑动的距离大于往右的距离时，取其往上滑动的距离，即往上滑动
        //这里还需要注意一点，滑动的距离需要调整  我是当滑动距离大于当前屏幕一半的时候为触发条件
        //还有就是最好跳转至指定的页面，因为我有时候一下滑动了好几个页面
        if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX>($(window).width()/2)){
            if(index !=0){
                myswiper.slideTo(index -1);
            }
            console.log('往右滑动');
        }else if(Math.abs(distanceX)>Math.abs(distanceY) && distanceX<-($(window).width()/2)){
            if(index != (sum-1)){
                myswiper.slideTo(index+1);
            }
            console.log('往左滑动');
        }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY<0){
            console.log('往上滑动');
        }else if(Math.abs(distanceX)<Math.abs(distanceY) && distanceY>0){
            console.log('往下滑动');
        }else{
            console.log('点击未滑动');
        }
    });

总结：其实百度出来的已经是解决方案了，但不是那种直接能拿来用的，自己就没有去实践(摸狗头)，今天请教同事，同事给我的建议就是，以百度出来的为样本，就是给页面增加监听事件，你把他的改一改，就可以了。