昨天用iframe模擬原生應用的webview功能，嵌套一個網址或本地HTML，今天通過測試，在ipad會出現頁面無法滾動的問題。iframe的寬高都爲屏幕的寬和高，設置屬性scrolling=‘auto’，以及樣式overflow: auto都沒用，而且iframe元素不支持touch事件，在iframe嵌套的網頁內部用js實現滾動也不現實。
怎麼讓ipad safari 中的iframe的內容在固定大小中可滾動？
網上說要用seamless屬性。直接寫個seamless。但是這個屬性ipad的safari不支持。chrome是支持的。
IE6 – Windows: no support
IE7 – Windows: no support
IE8 – Windows – Windows: no support
IE9 beta – Windows: no support
Firefox 3.6 – Windows: no support
Firefox 3.6 – OSX: no support
Firefox 4.0 – beta Windows: no support
Firefox 4.0 – beta OSX: no support
Safari OSX: no support
Chrome 7 – Windows: no support
Chrome 7 – Windows: no support
Chrome 9 – OSX: no support
Opera 11 – OSX: no support
測試例子：
http://www.maxdesign.com.au/jobs/example-seamless/
以上方法都無法解決ipad safari中iframe滾動的問題。
解決方法：
在iframe外加一層div，設置樣式
-webkit-overflow-scrolling:touch; overflow: scroll;
讓超出div的內容可以通過touch來滾動。
瞭解更多-webkit-overflow-scrolling
另外，如果iframe的src不是網址，而是本地的html，則需要給HTML的DOM添加監聽事件，讓html的body可以監聽到touch事件，讓嵌套的html也可以滾動。
js代碼：
var toScrollFrame = function(iFrame, mask) {
if (!navigator.userAgent.match(/iPad|iPhone/i)){
return false;
}
//do nothing if not iOS devie
var mouseY = 0;
var mouseX = 0;
jQuery(iFrame).ready(function() {//wait for iFrame to load
//remeber initial drag motition
jQuery(iFrame).contents()[0].body.addEventListener('touchstart', function(e) {
mouseY = e.targetTouches[0].pageY;
mouseX = e.targetTouches[0].pageX;
});
//update scroll position based on initial drag position
jQuery(iFrame).contents()[0].body.addEventListener('touchmove', function(e) {
e.preventDefault();
//prevent whole page dragging
var box = jQuery(mask);
box.scrollLeft(box.scrollLeft() + mouseX - e.targetTouches[0].pageX);
box.scrollTop(box.scrollTop() + mouseY - e.targetTouches[0].pageY);
//mouseX and mouseY don't need periodic updating, because the current position
//of the mouse relative to th iFrame changes as the mask scrolls it.
});
});
return true;
};
toScrollFrame('.myFrame', '.myMask');
html部分代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>wrapScroller demo</title>
<link rel="stylesheet" href="../style/wrapScroller.css" type="text/css" media="screen" />
<script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
<script type="text/javascript">
</script>
</head>
<body style="background: #ccc;">
<div>
HEADER - use 2 fingers to scroll contents:
</div>
<div id="scrollee" style="width:300px;height:300px;-webkit-overflow-scrolling:touch; overflow: scroll;">
<iframe id="object" height="90%" width="100%" type="text/html" src="http://en.wikipedia.org/"></iframe>
</div>
</body>