【JQuery】iPhoneでのiframeの設定とスクロール

この記事について

つまずきポイント要約

• iPhoneはiframeの高さ指定が無視される
• スクロールイベントの設定先が iPhone（親要素）とそれ以外（iframe自身）で違う

iPhoneでは、iframeの高さが設定できないので、フレームをはみ出る大きなコンテンツもスクロールバーは表示されず、iframeのサイズが無視されて表示される。

解決するには、iframeの真上の要素にサイズを設定する。

sample.php

<?php //スクロール量表示場所 ?>
<div id="log"></div>

<div class="ifrm-container">
<iframe src="iframe_test.html" id="iframe" class="ifrm" scrolling="auto"></iframe>
</div>

sample.css

.ifrm-container {
	width:300px;
	height:400px;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}

.ifrm {
	width:100%;
	height:100%;
	border:none;
	display:block;
}

参考サイト

jqueryでスクロールバーを操作する場合は、iPhoneでは、iframeをかこう要素にイベントを設定、それ以外ではiframe要素自身にイベントを設定する

//iPhone以外で100スクロールさせる

$($("#iframe").contents()[0]).scrollTop(100);



//スクロール量の表示
$( $('#iframe')[0].contentWindow ).scroll(function () {
	var st = $($("#iframe").contents()[0]).scrollTop();
	$("#log").html(st);
 //   });

//iPhoneで100スクロールさせる

$(".ifrm-container").scrollTop(100);


	//スクロール量の表示
$('.ifrm-container').scroll(function () {
	var st = $(".ifrm-container").scrollTop();
	$("#log").html(st);
});

参考：【jquery】iframe内のスクロールイベント設定とスクロール量取得

ただし、iPhoneで表示されるiframeは仕様上テキストが選択できない。テキストが選択したい場合は、擬似フレームを使う。

テキストが選択できない理由はこれだった↓↓
iPhoneで長文のテキストが選択しにくい