解决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