解決iframe在iPad內不能滾動的問題

解決iframe在iPad內不能滾動的問題

2012-07-16 21:07:22

 

在iPad1及iPad2裏面瀏覽含有iframe的Web頁面，會出現一個很抓狂的問題，就是iframe內引用的頁面內容不能上下滑動（滾動），測試了一下其餘的設備，這個問題也一樣出如今了Android平臺的瀏覽器上，大部分移動設備都存在這個問題，我估計開發商的初衷是爲了方便用戶瀏覽頁面，而使iframe的寬度和高度自動匹配其內容尺寸，可是對於iframe內的touch事件卻支持不完善，所以出現了iframe滑動無響應的現象。

在網上一艘，這方面的解決方法很多，可是內容和方法彷佛都差很少，大可能是經過給iframe內的window對象綁定事件，發生touch事件時即時改變iframe上級元素的scrollTop和scrollLeft值來實現，下面是個人實現方法：

1. HTML：
<div id="iframeBox">
<iframe src=" http://blog.luozhihua.com" width="320" height="240"></iframe>
</div>
2. CSS：
#iframeBox{
    border:1px solid #000;
    width:400px;
    height:320px;
    overflow:auto;
}
#iframeBox iframe{
    /* 在iPad及部分Android瀏覽器內下面的width、height無效 */
    width:100%;
    height:100%;
    overflow:auto;
    margin:0px; border:0px;
}
3. JavaScript:
/**
* @param iframeID iframe的id或者iframeElement[Doc Object]
* @param iframeWrapper 用於包裝iframe的元素
*/
function scrollIframeForIOS(iframe, iframeWrapper)
{
    if(!navigator.userAgent.match(/iPad|iPhone/i)) return false;

    var touchY = 0,
                touchX = 0;

        iframe = typeof(iframe)=="string" ? document.getElementById(iframe) : iframe;

        iframe.onload = function(){

                var ifrWin = iframe.contentWindow,
                        ifrDoc = ifrWin.document;

                // iframe的上一級節點
                iframeWrapper = iframeWrapper||ifrWin.frameElement.parentNode;

                // 記錄手指按下的位置
                ifrDoc.body.addEventListener("touchstart", function( event ){
                        touchX = event.targetTouches[0].pageX;
                        touchY = event.targetTouches[0].pageY;
                });

                ifrDoc.body.addEventListener("touchmove", function( event ){
                        e.preventDefault(); // 阻止整個頁面拖動
                        iframeWrapper.scrollLeft += (touchX - event.targetTouches[0].pageX);
                        iframeWrapper.scrollTop += (touchY - event.targetTouches[0].pageY);
                });
        }

    return true;
};

// 調用方法：body onload="scrollIframeForIOS('iframeBox');"
原文連接： http://blog.luozhihua.com/?p=1034