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

Webは別ドメインのコンテンツになると途端にできることが制限されます。セキュリティのためには必要なのは分かりますが、そのために回避策があれこれと考えられてしまうのも問題な気はします。

今回はiframeです。別ドメインのiframe内コンテンツはその高さが取得できません。それをsetIframeHeightを使って回避しましょう。

setIframeHeightの使い方

setIframeHeightを使うためにはまずiframe側でスクロール属性をnoにします。

<iframe scrolling="no" src="..."></iframe>

そしてJavaScriptを読み込みます。

<script src="dist/set-iframe-height-parent-min.js" async></script>

次にiframeの内側のコンテンツでJavaScriptを読み込みます。

<script src="dist/set-iframe-height-child-min.js" async></script>

後は両方のページでjQueryが必須となっています。

つまりsetIframeHeightのJavaScriptが相互に通信して高さを伝えているということです。回避策としては今のところこの方法しかありませんのでiframeを使って動的に高さの変わるコンテンツを提供する場合は使ってみましょう。

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

setIframeHeight Demo

FaiblUG/setIframeHeight

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2