Tweet

Pocket

iframeの高さを読み込むページの高さによって動的に変更する方法をご紹介。

まずは下記からJQueryライブラリのsetIframeHeightをダウンロードします。

• setIframeHeight

iframeのスクロール属性をnoに設定する

親ページhtml

<iframe src="child.html" frameborder="0" scrolling="no">この部分は iframe 対応のブラウザでご覧ください。</iframe>

親ページにsetIframeHeightを読み込ませる

親ページhtml

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

子ページにもsetIframeHeightを読み込ませる

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

※親ページと子ページのドメインが同じでないと動作しませんのでご注意ください。（クロスドメイン非対応）

参考サイト

• setIframeHeight – クロスドメインで動的に高さの変わるiframe設定を実現 MOONGIFT