ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTML5からはFlashのようにobjectタグではなく、iframeを使ってコンテンツを埋め込むのが基本になっています。しかしiframeではコンテンツが非同期かつセキュリティ上、そのコンテンツの大きさが分からないのが難点です。

iframeコンテンツの大きさに合わせて自動的にサイズを変更するためには親フレームと子フレーム間でメッセージを飛ばし合う必要があります。Facebookページではこの方法を行っていますが、同様の仕組みを実現するのがiFrame Resizerです。

iFrame Resizerの使い方

デモです。
デモです。

子フレームの中にリンクがあります。それをクリックすると親フレーム側のサイズ指定を変更できるようになっています。ウィンドウ間でメッセージを飛ばすことでコンテンツのサイズを取得し、それに合わせてフレームサイズを変更する仕組みになっています。

iFrame ResizerはIE8から対応していますので幅広いブラウザで使えそうです。埋め込みコンテンツにすることでセキュリティを切り分けることもできますので、CGM系で役立つテクニックかも知れません。

iFrame ResizerはHTML/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Iframe-resizer by davidjbradshaw

iFrame message passing test

davidjbradshaw/iframe-resizer

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2