【JQuery】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);
});
—————————————-

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

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