移動端swiper嵌iframe無法滑動的解決方案

Capricair發表於2019-03-12

最近專案有個需求，要把詳情頁改成多個頁面輪播，本來小事一樁，但頁面上有多個谷歌的內容廣告時，呼叫谷歌的非同步程式碼，所有內容廣告會重疊到第一個slide的廣告區域，無奈改成iframe終於解決了，但是又引來了本次蛋疼的問題，slide無法滑動。

經過一番谷歌百度，無非兩種辦法抄來抄去

1、給iframe設定 CSS pointer-events: none，
2、在iframe內監聽touch事件，根據手勢呼叫swiper的方法滑動

這兩種方法都存在問題

1、設定 pointer-events: none，iframe頁面的事件都不會觸發
2、監聽iframe的touch事件判斷手勢，很麻煩，slide還不能隨手指滑動，體驗不好

難道就沒有更好的解決辦法了嗎？

只要思想不滑坡，辦法總比問題多

我們都知道，移動端touch事件是比click事件先觸發的，順著這個思路，我們可以給iframe設定 pointer-events: none，在touchStart裡去掉，再在touchEnd裡恢復，不就可以解決不能點選的問題了麼？

const swiper = new Swiper(".swiper-container", {
    on: {
        touchStart(){
            this.slides[this.activeIndex].querySelector("iframe").style.pointerEvents = "none";
        },
        touchEnd(){
            // 由於touchEnd比click先觸發，所以要等click執行完以後，再恢復pointer-events
            setTimeout(()=>{
                this.slides[this.activeIndex].querySelector("iframe").style.pointerEvents = "auto";
            }, 1000);
        }
    }
});
複製程式碼

swiper 4.5.0 安卓移動端測試OK

相關文章