備忘録_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は良かった。

##参考にさせていただいた記事
http://qiita.com/gonshi_com/items/5a86fc415dcccfb04e2a#comment-475a95b4b8d993098233