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/

GitHub
https://github.com/davidjbradshaw/iframe-resizer

ダウンロードしたファイルを解凍し、jsフォルダーに入っている

  • iframeResizer.min.js
  • iframeResizer.contentWindow.min.js

ファイルを使用します。

親ページ(ホストしているページ)のセットアップ

iframe-resizer用にCSSを追加

<style>
  iframe {
    width: 1px;
    min-width: 100%;
  }
</style>

iframeResizer.min.jsを設置

<script src="js/iframeResizer.min.js"></script>

iframe要素を記述

<iframe id="myIframe" src="https://your-iframe.html"></iframe>

IDが付いていることにご注意ください。

子ページ(iframe内に含まれるページ)のセットアップ

iframeResizer.contentWindow.min.jsを設置

<script src="iframeResizer.contentWindow.min.js"></script>

最後にJavaScriptを呼び出します。

親ページ(ホストしているページ)に記載します

<script>
  iFrameResize({ log: true }, '#myIframe')
</script>

これだけでiframeがレスポンシブ、クロスデバイス、クロスドメイン対応になります。とても簡単です。

 

iFrame Resizerのまとめ

iFrame ResizerはjQueryの依存なく単体で動くのであらゆる場面で効力を発揮します。とくに楽天市場やYahoo!ショッピングのサイト構築では、非常に重宝するライブラリだと思います。

現在も開発されている上、GitHubにはさまざまなトラブルシューティングやIssuesでの問題解決方法も載っているので、iframeを使用する場面では本当にオススメのライブラリです。