Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
40
Help us understand the problem. What is going on with this article?
@ta__ho

スマホサイトなどでiframe要素をスクロールさせる方法

More than 3 years have passed since last update.

スマホサイトなどでiframe要素をスクロールさせる方法です。

iOS/Androidのiframe動作

両OSのiframe動作を確認したところ、iOS:Safari上では、iframeが正常に動かず、
要素がすべて表示されてしまった。

調べたところ、他にも同じことで困っている人がいるみたく、
解決方法があったので、実際に試してみました。

参考:

Scroll IFRAMEs on iOS
iphoneで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要素を作成し、親要素に追加するような動きになってます。

キャプチャ

noscroll.png

動くほう

動かない方と同様の作りですが、javascript内で行っているiframe要素の作成処理が異なっていて、iframe要素の1階層上にラッパーのdivをかましています。

iframe-wrapper.html
// 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.css
.iframe-wrapper { 
    -webkit-overflow-scrolling: touch;
    overflow: auto;
};

-webkit-overflow-scrolling: touchは、慣性スクロールをできるようにする設定ぽいです。慣性スクロールは、スッってやったらページもスってなるイメージですが、合っているか不明です。

参考:

スマートフォンでページの一部を慣性スクロールできるようにする-webkit-overflow-scrolling

overflow: auto;は、要素からはみ出た部分の表示の仕方を設定するもので、
autoにすると、ブラウザに依存する設定になるみたいです。

参考:

overflow・・・・・はみ出た内容の表示方法を指定する

キャプチャ

scroll.png

結果

うまくできました。

ただ、Androidだと普通にiframeが動くので、javascirpt内で処理を分けたほうがいいです。

iOS判定処理です。

isIos.js
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のソースを直接記述することができます。
今回も使ってます。

iframe-srcdoc.html
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で直りました。

以上です。

40
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ta__ho

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
40
Help us understand the problem. What is going on with this article?