スキップしてメイン コンテンツに移動

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

趣旨

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


方法

普通にやると、

「Uncaught SecurityError: Blocked a frame with origin "http://hoge.com" from accessing a frame with origin "http://fuga.com". 
Protocols, domains, and ports must match. 」

などと怒られてしまいますのでこちらを参考に

http://stackoverflow.com/questions/18456498/how-can-i-change-the-size-of-an-iframe-from-inside

http://i556tips.tumblr.com/post/15710917018/%E3%82%AF%E3%83%AD%E3%82%B9%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%A7iframe%E3%81%AE%E9%AB%98%E3%81%95%E3%82%92%E8%87%AA%E5%8B%95%E8%AA%BF%E7%AF%80%E3%81%99%E3%82%8Bjavascript


コード

hoge.com(親)


<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="960" height="auto" style="display:block; margin:0 auto; border:none;"></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>


ありがとうHTML5、そして、postMessage!


追記

この前ある方法をググって、なるほどなるほどって見てたら、過去の自分の投稿でびっくりしました。

コメント

コメントを投稿

このブログの人気の投稿

Googleタグマネージャー|iFrameの中で入力・確認・完了画面が遷移する場合の仮想ページビューのトラッキングの仕方

【概要】 Googleタグマネージャーをページに仕込んでおくと、仕込んだページ側のコードを一切変更することなく、後から動的にページビューやらイベントやらをタグマネージャー側の管理画面で動的にトラッキングすることができてとても便利なわけですが、ページがiframeの中で入力->確認->完了画面と遷移する場合、iframeの側(読み込む側)にタグマネージャーのタグを仕込んでおいても、目的のページビューがトラッキングできません。 そこでiframeで読み込まれた側の任意のページビューをトラッキングするためにGoogleタグマネージャーのdataLayerを利用する方法を記載します。 更に今回は、別々のiframeから共通で読み込まれたページでも外側のiframeに隠しコードを仕込み、どのiframeで読み込まれたのか判定して任意のトラッキング(仮想ページビュー)を行う方法をご紹介(提案)します。 【やりたいことをもう少し具体的に】 ページ要素として ・ 親フレームA ・ 親フレームB ・ 投稿フォーム とあった場合で ・ 親フレームA <= 投稿フォーム ・ 親フレームB <= 投稿フォーム と読み込んでいる場合に Googleタグマネージャーを使用して、親フレームAでの入力画面、親フレームBでの確認画面、、、等の仮想ページビューをトラッキングしたい。 【HTML】( 親フレームA ) 親フレームAに以下のタグを記述(非表示の判定フラグ用) <div id="post_which" style="display:none;">frameA</div> ※親フレームAにはGoogleタグマネージャーのタグは仕込みません。 【HTML】( 親フレームB ) 親フレームBに以下のタグを記述(非表示の判定フラグ用) <div id="post_which" style="display:none;">frameB</div> ※親フレームBにもGoogleタグマネージャーのタグは仕込みません。

WordPressのwp_get_archivesで月別リストを生成する際に<li>をカスタムする方法

【About】 WordPressの wp_get_archives('type=monthly') で月別のリスト<li>を生成する際に、特定の年月のアーカイブページを表示した際に<li>に特定のクラス(class="active"など)を設定する方法を記載します。 また、おまけとして、functions.phpによらず、テンプレートで<li>をカスタマイズする方法も記載します。 【通常の書き方】 <WordPress> ーテンプレート <p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul> とすると <HTML> <p>月別アーカイブ</p> <ul>     <li><a href="http://hoge.com/2013/12/">2013年12月</a></li>     <li><a href="http://hoge.com/2013/11/">2013年11月</a></li> </ul> などと生成されます。 これを、ある月を表示しているときに、該当のリスト<li>に class="active" を追加したいとします。 【カスタマイズ方法】 <WordPress> ーテンプレート <p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul> (変更なし) ーfunctions.php functions.phpに以下を追加 <?php ・・・ function my_archives_link($link_html){   $my_month = '/'