解決 swiper插件 嵌入 iframe 不能滑動問題

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)');
                    }
                    
                });
            }
        }