Css

iframeに異なるドメイン（クロスドメイン）のコンテンツを読み込んで高さを自動調節する方法

Tech

wordpressでサイトを構築したときに掲示板をつけることになりました。 bbpressをはじめ何種類かのプラグインも試しましたが、不要な機能が多く使いづらいので、別サイトで簡易なcgi掲示板を構築してiframeで埋め込むことにしました。

wordpress側の負担を減らすためもあり、表示部がHTMLでサーバに負荷をかけず表示の軽い掲示板cgi（kent-webの SUN BOARD） を選びました。

表示幅を最大にしたり、スクロールバーを非表示にしたりというのは簡単にできたのですが、「高さを自動調整する」という課題に躓き、Googleで調べてTipsを見つけました。

iframe（親）に異なるドメインのページ（子）を読み込んで、親フレームにスクロールが出ないよう、iframeの高さを子ページの高さに自動調節する

親ページと子ページにそれぞれ下記をコピペするだけでうまく行きました。感謝！

wordpress (親) 側の設定

<html>
<head>
    <title>親</title>
    <script src="js/jquery.js"></script>
    <script>
        window.addEventListener('message', function(e) {
        var iframe = $("#fugapage");
        var eventName = e.data[0];
        var data = e.data[1];
        switch(eventName) {
            case 'setHeight':
                iframe.height(data);
                break;
            }
        }, false);
    </script>
</head>
<body>
    <iframe id="fugapage" src="http://fuga.com/" width="100%" height="auto" " frameborder="0" scrolling="no"></frame>
</body>
</html>

埋め込みたい別ドメインのページ （子）

fuga.com

<html>
    <head>
        <title>子</title>
        <script type="text/javascript">
        window.onload = function() {
            var height = document.getElementsByTagName("html")[0].scrollHeight;
            window.parent.postMessage(["setHeight", height], "*");
        }
        </script>
    </head>
    <body>
    ・・・
    </body>
</html>

iPadでBootstrapのnavbarをcollapseさせる

Tech

CSSフレームワークのBootstrapを使って、ナビゲーション（navbar）を導入する場合、Bootstrapのデフォルトだと、iPadでnavbarがcollapseしてくれません。メニュー項目が多くなってくると、collapseしてくれないとレイアウト崩れが起きるので対策しました。

iPadでBootstrapのnavbarをcollapseさせるには、CSSに下記のコードを追加すればOKです。

/* navbar collapse for iPad (bootstrap) */
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

参考サイト