スマホサイトなどでiframe要素をスクロールさせる方法です。
iOS/Androidのiframe動作
両OSのiframe動作を確認したところ、iOS:Safari上では、iframeが正常に動かず、
要素がすべて表示されてしまった。
調べたところ、他にも同じことで困っている人がいるみたく、
解決方法があったので、実際に試してみました。
参考：
iframeサンプル
とりあえず、iframeが正常に動かないhtmlと動くhtmlを作成しました。
ソースはこちら。
iframe-no-scroll関連は動かないほうです。
iframe-scroll関連は動くほうです。
どこかのWebサーバにあげてスマホで見てください。
githubのキャラクターとgithubの説明（wikipedia参照）を載せたhtmlです。
動かないほう
htmlページにiframeを追加する親要素を記述し、
<div id="iframe-no-scroll" style="width:100%; height:200px;"></div>
javascript内の処理でiframe要素を作成し、親要素に追加するような動きになってます。
キャプチャ
動くほう
動かない方と同様の作りですが、javascript内で行っているiframe要素の作成処理が異なっていて、iframe要素の1階層上にラッパーのdivをかましています。
// iframeラッパー要素作成
var _iframeWrapper = document.createElement('div');
_iframeWrapper.className = 'iframe-wrapper';
_iframeWrapper.style.width = "100%";
_iframeWrapper.style.height = "100%";
_iframeWrapper.appendChild(_iframe);
そして、そのラッパーのdivを親要素に追加するような動きになってます。
_iframeScroll.appendChild(_iframeWrapper);
後、ラッパーの動作をcss上で定義しています。
.iframe-wrapper {
-webkit-overflow-scrolling: touch;
overflow: auto;
};
-webkit-overflow-scrolling: touchは、慣性スクロールをできるようにする設定ぽいです。慣性スクロールは、スッってやったらページもスってなるイメージですが、合っているか不明です。
参考：
overflow: auto;は、要素からはみ出た部分の表示の仕方を設定するもので、
autoにすると、ブラウザに依存する設定になるみたいです。
参考：
キャプチャ
結果
うまくできました。
ただ、Androidだと普通にiframeが動くので、javascirpt内で処理を分けたほうがいいです。
iOS判定処理です。
var isIod = function(){
var ua = window.navigator.userAgent.toLowerCase();
if (ua && ua.indexOf('iphone') === -1 && ua.indexOf('ipod') === -1 && ua.indexOf('ipad') === -1) {
return true;
}
return false;
};
後、そもそもなんで動かないかは、よくわかりません。
調べる元気があればソースを見てみます。
今後OSのアップデートで対応されるかもしれないですね。
Tips
この検証をやった際に色々htmlの勉強になったので、Tipsをあげときます。
iframeのsrcとsrcdoc
iframeのソースの指定方法には、src以外にsrcdocというものがあります。
結構便利で、iframeのソースを直接記述することができます。
今回も使ってます。
var desc = "テキスト・・・"
_iframe.src = "data:text/html;charset=utf-8," + desc;
もちろん、htmlも記述可能です。
後、ひっそり使っているdata:text/html;ですが、データURIスキームというもので、
text/html以外のmimeタイプを指定すると色々できて便利です。
iframeのソース置く場所がないけど、iframeで表示しないといけないという、
特殊な状況に置かれた場合はこれを使ってみるといいと思います。
appendChildの実行順序による表示順番
iOS(iPhone4S,iOS8.1,safari)で、javascript内で作成した要素をappendするときに、appendされる順番が早いほうがz−index的に下に配置されてしまい、別の要素がappendされると、かぶさってしまう現象が発生しました。
確かに自然な動きに見えますが、
AndroidのChromeとデフォルトブラウザ、iOSのChromeは逆の動きをしていました。
しっかり検証していないので、なんともいえませんが、そんなことがありました。
androidデフォルトブラウザ(Android 4.4.1, Xperia SOL25)の文字表示
javascript内でaタグの要素を作成し、他の要素をaタグにappnedしたところ、
文字の下に勝手に下線が引かれる現象が発生しました。
原因はよくわかりませんが、display:inline-blockで直りました。
以上です。