解決移動裝置上iframe滾動條的問題

發表於2019-05-11

在看到這個標題的時候，也許有人會說，在移動裝置上你壓根就不應該使用 iframe。但是，有時候專案需要你也不得不使用iframe來解決一些問題。


昨天在做一個相容手機端的網站後臺介面的時候就遇到這個問題，因為網站後臺內容區域使用了iframe，當iPhone上得是的時候發現，超出的部分壓根就不能滾動，遂谷歌之。出來的解決方案千篇一律，給iframe外層包一個 div　然後讓外層div溢位滾動。


試了一下，欣喜若狂，這種方案確實可行（哇，原來這麼簡單，我怎麼沒有想到！！！）。但是，在做下一個頁面的時候又遇到一個新問題，我的內容表格使用了　bootstrap　的響應試表格，也就是當表格寬度超出內容寬度的時候表格會自動出現一個橫向滾動條。但是，移動裝置上　iframe　是自適應內容寬度的，所以整個iframe的寬度其實是和表格一樣寬的。使用上面那種解決辦法就是出現一個橫向滾動條和一個縱向滾動條。這壓根就不是我要的效果呀。。。


繼續谷歌，總是沒有找到更好的解決方案。難道在移動裝置上還真不該使用iframe，我是不是真要換一個決絕方案？已經是凌晨兩點，實在抗不住了，先休息。早上七點早早醒來，突發奇想，我為什麼不把包在外面的那個div放到iframe裡面去呢？起床試了下，原來解決問題就是這麼簡單。


不過要把div包裹到iframe裡面去，需要使用到js的幫助，下面給出關鍵程式碼： 


//子頁面載入完成設定使用div包裹其內容
$("#main-iframe").on("load", function(){
    var $win = $(window), iframe = this;

    //解決iso系統iframe沒有滾動條的bug
    if(navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
        var $wrap = $("<div/>").addClass("mobile-devices-wrap");


	$wrap.css({
            "width":  $win.width(),
            "height": $win.height()
        });
        $(iframe.contentDocument.body).find(".container").wrapAll($wrap);
        $win.on("resize", function(){
            $(iframe.contentDocument.body).find(".mobile-devices-wrap").css({
                "width":  $win.width(),
                "height": $win.height()
            });
        });
    }
});



評論(5)

相關文章