備忘録_iframe関係(モーダルコンテンツの中身として)

iframe対応をした際の備忘録
※設定とかは簡易的に記述

使用したもの

• tingle.js

問題1 - モーダル時に背景固定(iOS)

iOS端末でモーダルを開いた時に背景を固定する。
その際に、背景位置を維持する必要がある。
※今回はモーダル内でもスクロールがあるため、タッチイベントを止めることはできなかった
※width: 100%;にしてあげないと、クリックのタイミングでbodyが画面幅を超える

var current_scrollY;

// OPEN MODAL
$( '.js-open' ).on( 'click', function(){

    current_scrollY = $( window ).scrollTop(); 

    // 固定処理
    $( 'body' ).css( {
        position: 'fixed',
        width: '100%',
        top: -1 * current_scrollY
    });

} );

// CLOSE MODAL
$( '.js-close' ).on( 'click', function( e ){

    // リセット処理
    $( '#wrapper' ).attr( { style: '' } );
    $( 'html, body' ).prop( { scrollTop: current_scrollY } );

});

問題2 - iframe要素の高さ指定問題(iOS)

iOSではiframeに直接高さ指定ができなかった。
iframe要素をラップする要素に対して高さを指定することで対応
※iframe要素に対しては高さ/幅ともに100%を指定

<div class=iframeWrap">
    <iframe></iframe>
</div>

.iframeWrap {
    width: 80%;
    height: 200px;
}

iframe {
    width: 100%;
    height: 100%;
}

問題3 - iframe内要素のスクロール問題(iOS)

「-webkit-overflow-scrolling」と「overflow」を組みわせて対応
※問題2のサンプルを利用

.iframeWrap {
    width: 80%;
    height: 200px;

    -webkit-overflow-scrolling: touch;
    overflow: auto;
}

iframe {
    width: 100%;
    height: 100%;
}

問題4 - iframe内の要素の高さを取得

モーダルの高さを可変にするために、iframe内の要素の高さを取得する

下記のサイトを参考にさせてもらって対応
http://dtp.jdash.info/archives/jQuery_iframe_auto_height_script

結論

iOSのモーダル処理が結構面倒だった。
基本的にiframeは避けたいってなった。。。

ただ、tingle.jsは良かった。

参考にさせていただいた記事