WEB制作

iframeに魔法をかけるiFrame Resizerライブラリ iFrameとiFrame Resizer ホームページ作成時の要素（タグ）のひとつに、iframe（インラインフレーム）があります。 iframeとは、HTML内に別のHTMLを入れ子にすることができる要素です。 この要素はとても古く、またSEO的にもあまりよくないなど少しづつ下火になってはいるのですが、iframeにしかできない表現があることから、2020年現在HTML5でもサポートされています。 そのiframeですが、デフォルトでは高さが自動調節できなかったり、クロスドメインはサポート対象外だったりとレスポンシブがデフォルトの昨今ではなかなか使いづらい仕様。それを一瞬で使いやすくしてくれる魔法のライブラリが今回ご紹介するiFrame Resizerです。 iFrame Resizerの特徴 iframeコンテンツサイズの高さと幅のサイズ変更対応複数のネストされたiframeで動作クロスドメイン対応ウィンドウサイズ変更サポート（レスポンシブ対応）複雑なCSSレイアウトをサポートするさまざまなページサイズ計算方法を提供 と至れり尽くせり。 まずはiFrame Resizerのデモをご覧ください。 iFrameのサイズを自動的に変更するIframe Resizerのデモhttp://davidjbradshaw.com/iframe-resizer/example/ デモのリンクをクリックすると、iframeの変化に合わせてコンテンツサイズが自動で更新されるのがわかると思います。 これはたとえばタブレットやスマートフォンなど縦横可変デバイスでも、iframeが追随してフレームの高さと幅を確保することを意味します。素晴らしい。 iFrame Resizerの典型的なセットアップ 下記からライブラリをダウンロード。 公式サイトhttp://davidjbradshaw.github.io/iframe-resizer/ GitHubhttps://github.com/davidjbradshaw/iframe-resizer ダウンロードしたファイルを解凍し、jsフォルダーに入っている iframeResizer.min.jsiframeResizer.contentWindow.min.js ファイルを使用します。 親ページ（ホストしているページ）のセットアップ iframe-resizer用にCSSを追加 &lt;style&gt; iframe { width: 1px; min-width: 100%; } &lt;/style&gt; iframeResizer.min.jsを設置 &lt;script src="js/iframeResizer.min.js"&gt;&lt;/script&gt; iframe要素を記述 &lt;iframe id="myIframe" src="https://your-iframe.html"&gt;&lt;/iframe&gt; IDが付いていることにご注意ください。 子ページ（iframe内に含まれるページ）のセットアップ iframeResizer.contentWindow.min.jsを設置 &lt;script src="iframeResizer.contentWindow.min.js"&gt;&lt;/script&gt; 最後にJavaScriptを呼び出します。 親ページ（ホストしているページ）に記載します &lt;script&gt; iFrameResize({ log: true }, '#myIframe') &lt;/script&gt; これだけでiframeがレスポンシブ、クロスデバイス、クロスドメイン対応になります。とても簡単。 iFrame Resizerのまとめ iFrame ResizerはjQueryの依存なく単体で動くのであらゆる場面で効力を発揮します。とくに楽天市場やYahoo!ショッピングのサイト構築では、非常に重宝するライブラリだと思います。 現在も開発されている上、GitHubにはさまざまなトラブルシューティングやIssuesでの問題解決方法も載っているので、iframeを使用する場面では本当にオススメのライブラリです。