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


CONTACT

お問い合わせ

AEDI株式会社

〒710-0801 岡山県倉敷市酒津2549-2

貴社のサービス・商品のブランディング、デザイン、ホームページでお困りのこと、お仕事のご依頼、お見積もり、デザイン、ホームページ制作、その他AEDIのご提供するサービスに関することでご質問等ございましたらお気軽にお問い合わせください。

お問い合わせフォームとお電話より承っております。

アイデアを生み出すAEDIの事務所(岡山県倉敷市酒津)

お電話でのお問い合わせ: 平日9:00〜19:00(日・祝を除く)

050-5899-6624