GIG

赴くままに技術を。

iframeを自動的にリサイズ

jQuery

iframeで他のhtmlを埋め込みたくなったので、iframeのサイズを自動調整するような そういうjquery pluginがないか探していました。 Google先生に聞いてみたところ、下記が良くヒットします(日本語では)。

bowerを通してインストールしたいので、bowerにも聞いてみたところ、 下記のような結果が得られました。

$ bower search iframe
Search results:

    jquery.iframe-transport git://github.com/cmlenz/jquery-iframe-transport.git
    iframe-resizer git://github.com/davidjbradshaw/iframe-resizer.git
    jquery-bgiframe git://github.com/brandonaaron/bgiframe.git
    responsiveiframe git://github.com/npr/responsiveiframe
    iframe-auto-height-jquery-plugin git://github.com/Sly777/Iframe-Height-Jquery-Plugin
    versal-iframe-launcher git://github.com/versal/iframe-launcher.git
    jquery.iframetracker.buzzstarter git://github.com/ggenov/iframeTracker-jquery.git
    jquery-iframeshim git://github.com/alexcheng1982/jquery-iframeshim.git
    basic-seamless-iframe

この中でサイズの自動調整は、davidjbradshaw/iframe-resizer · GitHubとSly777/Iframe-Height-Jquery-Plugin · GitHubです。 後者は先のjquery-iframe-auto-heightと機能として同じみたいですね。 メンテナンスが今もされているという観点で、前者のiframe-resizerを利用してみます。

使い方

Bowerでインストールします(なければ、GitHubからcloneして任意の場所に置いておきます)。

$ bower install -S iframe-resizer

インストールされたJavaScriptは２種類あります。

  • iframeResizer.min.js ; iFrameを埋め込む方のHTMLで読ませる
  • iframeResizer.contentWindow.min.js ; iFrame側のHTMLで読ませる

あとはiframeを埋め込んだ側で、以下のように呼び出して上げます。

$(‘iframe’).iFrameResize({});

これらを使った例を見てみましょう。 まずはiframeでchild.htmlを取り込むparent.htmlの方です。

  • parent.html
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
    <title>Iframe Resize Demo</title>
</head>
<body>

     <iframe src="./child.html" width="100%" scrolling="no" frameborder="0"></iframe>
    
    <!-- JavaScript -->
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <!--script src="../bower_components/iframe-resizer/src/iframeResizer.js"></script>
    <script>
         $('iframe').iFrameResize({ });
    </script-->
</body>
</html>

それでもって、iFrameで参照される側の方。

  • child.html
<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
    <title>Child</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body>

    <div class="jumbotron">
        <h1>Child</h1>
        <p>これはiframe側の要素。</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
    </div>
    
    <!-- JavaScript -->
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../bower_components/iframe-resizer/src/iframeResizer.contentWindow.js"></script>
</body>

どうなるの?

  • Before

何も調整していない場合、下の方が切れてしまっていますね。

f:id:hermesian:20140810221923p:plain

  • After

無事下の方まで見えるようにheightが調整されていることが分かります。

f:id:hermesian:20140810221924p:plain

サイズが合わない?

“Troubleshooting > IFrame not sizing correctly”(https://github.com/davidjbradshaw/iframe-resizer#iframe-not-sizing-correctly)に記載されてます。heightCalculationMethodで、maxまたはlowerstElementを設定すると良いみたいです。