iframe in ipad safari

4252 ワード

Safari

今日はウェブサイトやローカルHTMLをネストし、iframeを使い、パソコンにscrolling=「auto」を設定し、幅の高さ、スクロールバーが表示されます.ipadにはページ全体の幅の高さがすべて表示されます.scrollingプロパティが無効です.html 5のiframeにはsrcの属性しか残っていませんでした.
ただしscrolling=‘no’を設定.やはり有効になります.ページには、定義された高さと幅のサイズのみが表示されます.overflow:hiddenを設定しても無駄です.
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でスクロールできるようにします.
また、iframeのsrcがURLではなくローカルhtmlの場合、HTMLのDOMにリスニングイベントを追加し、htmlのbodyがtouchイベントをリスニングし、ネストされたhtmlもスクロールできるようにする必要があります.


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');

最終コード


<!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>
</html>

参照先:
http://stackoverflow.com/questions/6139564/iframe-size-on-ipad
http://jsfiddle.net/CobaltBlueDW/zHR8s/
http://stackoverflow.com/questions/4804604/html5-iframe-seamless-attribute

displayの除去:inline-block要素間の間隔

C 11キーワード_Static_assert