クロスドメインのiFrameで高さ(height)を自動取得して調整する方法

2012/01/25

クロスドメイン（別ドメイン）のhtmlをiframeで読み込んだ場合、セキュリティの都合でiframe内のdomを操作することができません。

同じドメイン内のhtmlをiframeで埋め込む場合なら、DOMでheightを取得して自動で調整することが簡単にできるのですが、クロスドメインの場合は難しいようです。

最初はpostMessageで通信して値を受け渡す方法を試したのですが、IE8以前にはpostMessageが実装されていないため、動作しません。

そこで、見つけたのがこの方法。

cross domain iframe resiziing

このサンプルだと、小サイトではjQueryを使って文字サイズを自動で可変するようになっていて、setIntervalでheightを取得し直すようになっていますが、そのような必要がない場合は

window.onload = function(event) {
        window.setInterval(publishHeight, 300);
    }

    $(function() {

        var $content = $("#content");

        function toggleFontSize() {

            if ($content.css("font-size") == "22px") {
                $("#content").animate({
                    fontSize: "15px"
                });
            } else {
                $("#content").animate({
                    fontSize: "22px"
                });
            }

        }

        var int = setInterval(toggleFontSize, 5000);

    });

window.onload = function(event) {

window.setInterval(publishHeight, 300);

}

$(function() {

var $content = $("#content");

function toggleFontSize() {

if ($content.css("font-size") == "22px") {

$("#content").animate({

fontSize: "15px"

});

} else {

$("#content").animate({

fontSize: "22px"

});

}

var int = setInterval(toggleFontSize, 5000);

});

を

    window.onload = function(event) {
        publishHeight();
    }

window.onload = function(event) {

publishHeight();

}

としてあげれば、OKです。

jQueryを読み込む必要も無いです。

他にもっとスマートな方法がアリそうなのですが、いい方法があればぜひ教えてください！

前の記事
googleウェブマスターツールでクロール依頼する「URLを追加」ページが404な件

次の記事
楽天市場RMSに３クリックで自動ログインするブックマークレットを作りました

関連記事一覧

2012/01/30

facebookページのiframeでイイネをしてくれた人とそうでない人に別のページを見せる方法

facebookページでよくある「いいね」してない人には情報をチラ見せして、イイネを誘導するページの作り方を勉強しました。やりかたとしては、いいねを押したかどうかを判別して、イイネしてくれた人に...続きを見る

2011/08/16

ウェスティンナゴヤキャッスルで開催のミッフィーワールドに行ってきました

皆様、暑い日が続いていますが、いかがお過ごしでしょうか？スタッフの　のりプー　です。しばらく開業準備で忙しかったのですが、今回お盆休みにひさびさにゆっくりする時間が取れたので、ウェスティン名古屋...続きを見る

2012/01/04

IEでネガティブマージンを適用すると、はみ出した部分が消える問題

HTMLで画像等を配置する際に、レイアウトを微調整するためにネガティブマージン（マイナス方向へのマージン）を設定することがよくあります。ですが、ネガティブマージンを使用した場合、IEだと上図のよう...続きを見る

2012/11/19

パララックスなjQueryスライダーSequence.jsがIEではロード中で止まってしまう件の解決方法

追記2013-1/15： v0.8 18/11/2012のアップデートにて、この問題は解決したそうです。（未確認）最近はやりの技術といえば、やはりパララックス(parallax)。視差効果を使っ...続きを見る

前の記事
googleウェブマスターツールでクロール依頼する「URLを追加」ページが404な件

次の記事
楽天市場RMSに３クリックで自動ログインするブックマークレットを作りました

月	火	水	木	金	土	日
« 1月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

SPOTブログ