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

admin

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

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

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

1. var self = this;
   
2.             var isMove,pageX,poor,moveArr;
   
3.             var iframe = document.querySelector('#myiframe');
   
4.             var wrap = $('#shebao').closest('.swiper-wrapper');
   
5.             var num ;
   
6. 
   
7.             iframe.onload = function(){
   
8.                 var doc = iframe.contentWindow.document;
   
9.                 self.height = $('#shebao').parent().height();
   
10. 
    
11.                 doc.addEventListener("touchstart",function(e){
    
12.                     isMove = true;
    
13.                     moveArr = [];
    
14.                     pageX = e.targetTouches[0].pageX;
    
15.                     moveArr.unshift(pageX);
    
16.                     //获取的transform值，matrix(1, 0, 0, 1, -1280, 0)
    
17.                     num = wrap.css('transform').split(',')[4];
    
18.                 });
    
19.                 doc.addEventListener("touchmove",function(e){
    
20.                     if(!isMove) return;
    
21.                     e.preventDefault();
    
22.                     
    
23.                     /*大概是iframe的原因，touch事件在移动的时候会产生两条不一样的数据，从而导致在滑动的时候产生抖动现象。
    
24.                       从而添加一个数组moveArr进行当前值和历史值进行对比,去掉多余数据
    
25.                     */
    
26.                     //当往左滑的时候，
    
27.                     if(pageX > e.targetTouches[0].pageX){
    
28.                         //历史值应该大于当前值，否则return
    
29.                         if(moveArr[0] < e.targetTouches[0].pageX){
    
30.                             return;
    
31.                         }
    
32.                     }
    
33.                     //当右滑的时候，
    
34.                     if(pageX < e.targetTouches[0].pageX){
    
35.                         //历史值应该小于当前值，否则return
    
36.                         if(moveArr[0] > e.targetTouches[0].pageX){
    
37.                             return;
    
38.                         }
    
39.                     }
    
40.                     //往数组头部插入数据
    
41.                     moveArr.unshift(e.targetTouches[0].pageX);
    
42.                     poor = pageX - e.targetTouches[0].pageX;
    
43.                     wrap.css('transform','translate3d('+(num-poor)+'px,0px,0px)');
    
44.                 })
    
45. 
    
46.                 doc.addEventListener("touchend",function(e){
    
47.                     isMove = false;
    
48.                     poor = pageX - e.changedTouches[0].pageX;
    
49. 
    
50.                     //当移动超过设定值后进行swiper的上一页下一页操作
    
51.                     if(Math.abs(poor)>50){
    
52.                         if(poor < 0 ){
    
53.                             window.pages.slidePrev();
    
54.                         }else{
    
55.                             window.pages.slideNext();
    
56.                         }
    
57.                     }else{
    
58.                         //复原当前位置
    
59.                         wrap.css('transform','translate3d('+num+'px,0px,0px)');
    
60.                     }
    
61.                     
    
62.                 });
    
63.             }
    
64.         }

复制代码