web-dev-qa-db-ja.com

iframe内からJavaScriptでiframeの高さを取得する方法は？複数のiframeがあるページはどうですか？

Iframe内からスクリプトを実行して、iframeの高さと幅を検出する方法はありますか？ iframeの高さ/幅の違いに応じて、iframeの一部の要素を動的に配置する必要があります。

同じページに複数のiframeがある場合、何か違いはありますか？つまり、各iframeは独自の寸法を見つけたいと考えています。

JavaScriptまたはjqueryソリューションを歓迎します。

ありがとう！

<iframe src='http://example.com' width='640' height='480' scrolling='no' frameborder='0' longdesc='http://example.com'></iframe>

Iframeは他のサイトに埋め込む必要があり、以下の回答の1つで述べたように、許可の問題が発生しました。

javascriptjqueryhtmldomiframe
18
VKen

Iframeのページとその親ページが異なるドメインから提供されている（つまり、iframeページから親ページのDOMプロパティにアクセスできない）場合、ビューポートの高さを計算しようとしたときと同じだと思います。

それについては、以下を参照してください：

またはおそらくこれ：

6
Paul D. Waite

次のようなコードに注意してください。

var thisIframesHeight = window.parent.$("iframe.itsID").height();

iframeのソースと親ウィンドウが同じドメインからのものである場合にのみ安全です。そうでない場合は、許可が拒否された問題が発生し、別のアプローチをとる必要があります。

5
Julian Jelfs

他のすべての回答が古いため、少し遅れる可能性があります:-)しかし...これが私の解決策です。実際のFF、ChromeおよびSafari 5.0でテスト済み。

css：

iframe {border:0; overflow:hidden;}

javascript：

$(document).ready(function(){
    $("iframe").load( function () {
        var c = (this.contentWindow || this.contentDocument);
        if (c.document) d = c.document;
        $(this).css({
            height: $(d).outerHeight(),
            width: $(d).outerWidth()
        });
    });
});

これが誰かを助けることを願っています。

3
ddlab

それぞれの_<iframe>_にはidが必要だと思います。そして、_<iframe>_内では、次のように参照します。

var thisIframesHeight = window.parent.$("iframe#itsID").height();

3
Anriëtte Myburgh

はい、フレームの内側から親のウィンドウ関数を実行し、次のようにパラメーターを渡すことができます。

window.parent.FUNC_NAME(iframe_height,iframe_width)

親ウィンドウで関数FUNC_NAMEを定義することを忘れないでください

0
Valentin Kantor