swiper中使用iframe导致无法滑动的3个解决方案-CSDN博客

看到这个标题，很多同学都会疑惑，为什么swiper中要放iframe呢？事实上，当我遇到这个需求前，我也没想到会有这样的骚操作，swiper中嵌入网站，每次滑动切换一个网站？想想听炫酷的，可做起来就不酷了。

当你开开心心的把iframe放到每一个swiper-slide中后，你会发现页面不能滑动了，你哭了，你绝望了。你打开谷歌，搜解决方案时，你会发现这类相关库的作者遇到这种bug比你还绝望：

这个swipe作者的回答翻译过来的大致意思是：“大哥了这问题不好搞我也不想搞了，拜拜”
而swiper的作者回答的更直接：

"这是iframe的锅，我没法在iframe里侦听到事件"
然后close了这个issue...
难道就没有办法解决这个问题吗？终于，经过各种百度谷歌翻issue，我找到了三种解决这个问题的方法，正好应对了三种不同的情况，且听我娓娓道来。

最简单的办法:pointer-events

pointer-events是css3新增的属性，它可以让设置这个属性的元素无法侦听任何事件，具体的API可以参考这里pointer-events
我们可以给iframe设置这个属性之后，网站之间就可以来回切换。但是，这种方法有个弊端，正如官方介绍所说，它会是整个元素无法侦听事件，这会网站内的所有交互都无法操作了，除非你得页面是个纯展示性质的静态网站。
所以，如果你想用这种方法解决无法滑动的问题，首先要确保你的网站是纯静态没有任何事件需要触发的。

侦听iframe内的滑动事件

这种方法适合iframe内的网址和外部的网址在同一域下，因为我们需要直接在父级页面监听iframe内的事件：

//  用来计算滑动方向的变量
let startX,startY,endX,endY,distanceX,distanceY; 
let iframe = document.querySelector('iframe');
const MOVE_RATE = 2;
iframe.contentWindow.addEventListener('touchstart',function (e) {
    startX = e.targetTouches[0].pageX;
    startY = e.targetTouches[0].pageY;
});
iframe.contentWindow.addEventListener('touchmove',function (e) {
    endX = e.targetTouches[0].pageX;
    endY = e.targetTouches[0].pageY;
    distanceX = endX - startX;
    distanceY = endY - startY;
    if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX > (body.clientWidth/MOVE_RATE)){
        //slideNext 和 slidePrev)()都是swiper的API
        myswiper.slideNext()
    }else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX < (body.clientWidth/MOVE_RATE)){
        myswiper.slidePrev()
    }else{
        console.log('点击未滑动');
    }
});
复制代码

这个方案的思路是先获取iframe内部的window，然后监听window的touchstart和touchmove事件，根据滑动方向和距离判断是左滑或者右滑，调用swiper向前或者向后滑的API即可。

这个方案其实百度一搜就有，如果你有研究过swiper中嵌入iframe话一定见过这个方案，但其实，这个方案有两个弊端：

一是当swiper页面3个以上时，由于touchmove事件是多次触发的，导致多次调用slideNext或者slidePrev方法，用户轻轻滑一下页面，直接会滑到最后一页；

第二个问题是是不能处理跨域的网址，事实上有些需求是需要嵌入一些合作方的网址的，而这些网址不一定是同域的；

第一种情况我的解决办法是，声明两个变量，分别作为向左滑和向右滑的计数器，让touchmove事件仅执行一次，同时，当完成一次滑动后清空计数器，保证下次同方向的滑动:

let left_slide_count = 0, right_slide_count = 0;
const COUNT_LIMIT = 2;
...
...
if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX > (body.clientWidth/MOVE_RATE)){
   //slideNext 和 slidePrev)()都是swiper的API
   left_slide_count ++;
   if( left_slide_count < COUNT_LIMIT ){
       myswiper.slideNext()
   }
}else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX < (body.clientWidth/MOVE_RATE)){
   right_slide_count ++;
   if( right_slide_count < COUNT_LIMIT ){
       myswiper.slidePrev()
   }
}else{
   console.log('点击未滑动');
}
复制代码

同时，我们还需要在swiper中加一些配置：

let swiper = new Swiepr({
    ...
    ...
    on: {
       //当滑动结束时，清空计数器
       slideChangeTransitionEnd: function(){
         left_slide_count = 0;
         right_slide_count = 0;
       },
    }
})
复制代码

至于第二个问题，其实可以用postMessage来解决。

使用postMessage解决嵌入跨域网站的滑动

这种方法其实和上种方法的解决思路大致相同，不过是把滑动的监听放到内部网站中，然后把滑动信息通过postMessage传给父级页面，然后父级页面调用swiepr的API：

let left_slide_count = 0, right_slide_count = 0;
const COUNT_LIMIT = 2;
...
...
if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX > (body.clientWidth/MOVE_RATE)){
   //slideNext 和 slidePrev)()都是swiper的API
   left_slide_count ++;
   if( left_slide_count < COUNT_LIMIT ){
       window.parent.postMessage("right-move", "*")
   }
}else if(Math.abs(distanceX) > Math.abs(distanceY) && distanceX < (body.clientWidth/MOVE_RATE)){
   right_slide_count ++;
   if( right_slide_count < COUNT_LIMIT ){
       window.parent.postMessage("left-move", "*")
   }
}else{
   console.log('点击未滑动');
}

复制代码

父级页面需要监听postMessage事件：

window.postMessage("message", function(e){
    if(e.data == "right-move"){
       if( left_slide_count < COUNT_LIMIT ){
         myswiper.slideNext()
       }
    }else if(e.data == "left-move"){
       if( right_slide_count < COUNT_LIMIT ){
         myswiper.slidePrev()
       }
    }
})
复制代码

当然，这种方法也要做计数器的处理。此外，这种方法也有两个弊端，第一个是当你滑动一下屏幕时页面可以正常切换，但是手一直放在屏幕上滑不离开的话，屏幕达到某个临界值会在两个页面不停切换，直到你松手；第二个弊端是它需要在嵌入的网站中植入一段js脚本才行，如果你想嵌入纯第三方的网站比如淘宝等，那这种方法是行不通的。

那么有没有一种方法可以直接嵌入第三方网站并支持滑动呢，很抱歉确实没有找到，不多我在翻issue时找到了一个叫iframeTracker的库,它可以监听到iframe中的点击事件(当然，这是模拟出来的，事实上并不能监听到)，虽然它是一个jquery库，但是内部源码很简单，可以轻松转成js的，做PC端的朋友同时需要监听到iframe中的点击事件的可以看看这个库，我在这里也简单介绍一下这个库的实现：

在PC端上，我们是可以监听到iframe的mouseover和mouseout事件的，然后，在页面外写一个input表单，当我们鼠标悬浮在iframe上时，让input表单执行focus事件，当我们在iframe上点击时，会触发input的blur事件，同时也会触发window的blur 事件，这时我们监听window的blur事件，就算捕获到iframe的click事件了。

至于监听移动端的touch事件，各位朋友们有没有好主意呢？