看到这个标题,很多同学都会疑惑,为什么swiper中要放iframe呢?事实上,当我遇到这个需求前,我也没想到会有这样的骚操作,swiper中嵌入网站,每次滑动切换一个网站?想想听炫酷的,可做起来就不酷了。
当你开开心心的把iframe
放到每一个swiper-slide
中后,你会发现页面不能滑动了,你哭了,你绝望了。你打开谷歌,搜解决方案时,你会发现这类相关库的作者遇到这种bug比你还绝望:
而swiper的作者回答的更直接:
然后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事件,各位朋友们有没有好主意呢?