码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-12-14 18:45:32      阅读:3404      评论:1      收藏:0      [点我收藏+]

标签:将不   策略   位置   his   手写   win   网页   select   大于   

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

 

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

标签:将不   策略   位置   his   手写   win   网页   select   大于   

原文地址:http://www.cnblogs.com/lihui1030/p/6180274.html

(0)
(0)
   
举报
评论 一句话评论(1
2017-01-23 15:14:49
你的html结构是什么样的? 我现在遇见手机端,swiper里的div里面嵌套iframe,只有在分页器细窄的一行区域内可以切换iframe,在iframe页面上不能左右滑动切换。
回复
 (2)
 (2)
1条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!