HTML：iframeでフッターを共通化できるか試している その２

困ったときのjQueryプラグイン。

photo credit: Rodrigo Baptista via photo pin cc

前回iframeでフッターを共通化できないか試していることを書いたが、その続き。

HTML：iframeでフッターを共通化できるか試している - ソフトウェア開発者の日常

heightを指定してみる

iframeタグのwidthに100%を指定したら、横幅は最大化されたので、高さもなるかと思って、autoや100%を指定してみたが、高さは変わらなかった。

JavaScriptでheightを調整してみる

iframe width 自動のキーワードで検索したときに見たサイトに、JavaScriptでheightを調整する方法の記事があったので試した。

結果は、iframeで読み込むページの高さが正しく取得できなくて、望んだ表示にはならなかった。

記事が書かれた当時と今では、ブラウザの仕様が変わってきているためかもしれなかったが、原因まではつかめなかった。

jQueryプラグインで、heightを調整してみる

iframe height autoのキーワードで検索したら、iframeで読み込むページの高さを取得して、iframeのheightを調整してくれるjQueryのプラグインの紹介記事があったので試した。

紹介されていたのは、jquery-iframe-auto-heightで、以下のように設置したら、望んだとおりの表示になった。

<iframe class="footerFrame" src="../footer/index.html" scrolling="no" frameborder="0" width="100%"></iframe>
<script src="../js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="../js/jquery.iframe-auto-height.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery('iframe.footerFrame').iframeAutoHeight();
</script>

 プラグインに渡す名前がクラス名だと最初気づかなくて動作しなかったが、クラス名を指定したら、正常に動作した。

 jQueryはプラグインがいろいろ揃っていて、大抵のことはできてしまうから、悩み始めたら気持ち切り替えて、プラグインを探した方が手っ取り早いときがある。