解决 swiper插件 嵌入 iframe 不能滑动问题

Posted 2020-08-23 冰vs焰

iframe里是另一个网页，所以swiper检测不到内页的事件。

方法一：直接设置样式  pointer-events: none; 但iframe里面所有事件将不能点击包括 a链接

 

方法二：自己动手写内页事件检测，然后改变swiper，这个一定是在js的同源策略下才能进行。直接上代码...

var self = this;
            var isMove,pageX,poor,moveArr;
            var iframe = document.querySelector(‘#myiframe‘);
            var wrap = $(‘#shebao‘).closest(‘.swiper-wrapper‘);
            var num ;

            iframe.onload = function(){
                var doc = iframe.contentWindow.document;
                self.height = $(‘#shebao‘).parent().height();

                doc.addEventListener("touchstart",function(e){
                    isMove = true;
                    moveArr = [];
                    pageX = e.targetTouches[0].pageX;
                    moveArr.unshift(pageX);
                    //获取的transform值，matrix(1, 0, 0, 1, -1280, 0)
                    num = wrap.css(‘transform‘).split(‘,‘)[4]; 
                });
                doc.addEventListener("touchmove",function(e){
                    if(!isMove) return;
                    e.preventDefault();
                    
                    /*大概是iframe的原因，touch事件在移动的时候会产生两条不一样的数据，从而导致在滑动的时候产生抖动现象。
                      从而添加一个数组moveArr进行当前值和历史值进行对比,去掉多余数据
                    */
                    //当往左滑的时候，
                    if(pageX > e.targetTouches[0].pageX){
                        //历史值应该大于当前值，否则return
                        if(moveArr[0] < e.targetTouches[0].pageX){
                            return;
                        }
                    }
                    //当右滑的时候，
                    if(pageX < e.targetTouches[0].pageX){
                        //历史值应该小于当前值，否则return
                        if(moveArr[0] > e.targetTouches[0].pageX){
                            return;
                        }
                    }
                    //往数组头部插入数据
                    moveArr.unshift(e.targetTouches[0].pageX);
                    poor = pageX - e.targetTouches[0].pageX;
                    wrap.css(‘transform‘,‘translate3d(‘+(num-poor)+‘px,0px,0px)‘);
                })

                doc.addEventListener("touchend",function(e){
                    isMove = false;
                    poor = pageX - e.changedTouches[0].pageX;

                    //当移动超过设定值后进行swiper的上一页下一页操作
                    if(Math.abs(poor)>50){
                        if(poor < 0 ){
                            window.pages.slidePrev();
                        }else{
                            window.pages.slideNext();
                        }
                    }else{
                        //复原当前位置
                        wrap.css(‘transform‘,‘translate3d(‘+num+‘px,0px,0px)‘);
                    }
                    
                });
            }
        }