three.jsのiframe埋め込みでiOSでのオートリサイズの回避策

Facebookでシェア Twitterでシェア

常にこの現象が起こるかどうかはわからなが、three.jsを(使用したHTMLを)iframeでこのサイトのページに埋め込むと、iOSではthree.js/iframeの内容が増大し続けるという現象があった。

この現象はどうやらiOSではiframeがオートリサイズされるためのものらしいが、その回避策を見つけたのでここに記しておく。

// iframeにIDを追加。今回は#viewer。
<iframe id="viewer" src="https://www.aedi.jp/demo/facecube/facecube-es5.html" width="100%" height="600" scrolling="no" frameborder="no" style="border:none" ></iframe>

<script>
		// iOS iframe auto-resize workaround
		if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {
			var viewer = document.getElementById( 'viewer' );
			viewer.style.width = getComputedStyle( viewer ).width;
			viewer.style.height = getComputedStyle( viewer ).height;
			viewer.setAttribute( 'scrolling', 'no' );
		}
</script>

参照: three.js/BoxBufferGeometry.html at dev · mrdoob/three.js
    javascript – Three.js embedded in iframe grows endlessly in iOS 8/9 – Stack Overflow