web-dev-qa-db-ja.com

jQueryでiframeの高さを制御する

JQueryを使用してiframeの高さを制御しています。

jQuery("iframe",top.document).contents().height();

これは、iframeの高さが増加するときに機能します。高さが減少すると機能しません。古い値のみを返します。なんでこんなことが起こっているの？

jqueryhtmliframe
20
Saravanan

私は以下を使用し、それは完璧に動作します...

$("#frameId").height($("#frameId").contents().find("html").height());

もちろん、それが呼ばれたとき（「自動サイズ変更なし」）ですが...

30
Tom

.contents()を使用せずに設定して取得すると、うまくいきます。以下の例を参照してください。

function changeFrameHeight(newHeight){
  jQuery("iframe",top.document).height(newHeight);
  alert("iframe height=" + jQuery("iframe",top.document).height());
}

編集：正しく理解できれば、増分を呼び出してスクロールバーを削除し、減分を呼び出して元の高さに戻ろうとしています。

異なるブラウザーで複数のテストを実行した後。 FF、IE、Chrome、Safari、Operaで動作するコードを次に示します。

//first declare a variable to store the original IFrame height.
var originalHeight = $("iframe",top.document).height();

heightIncrement関数を変更して、次を使用します。

heightIncrement:function(){
 var heightDiv = jQuery("iframe",top.document).contents().find('body').attr('scrollHeight'); 
 jQuery("iframe",top.document).css({height:heightDiv});
}

heightDecrement関数を変更して、次を使用します。

heightDecrement:function(){
 jQuery("iframe",top.document).css({height:originalHeight});
}
5
Jose Basilio

これは古くからありますが、うまくいけば助けになります。

Chrome（またはWebkitのすべて、おそらく不明）には、scrollHeightを増やすことはできますが、減らすことはできません（少なくともiframeのコンテンツの場合）。 scrollOffsetは成長し、その後縮小しますが、scrollOffsetはより高いレベルに留まります。iframeの高さを常に変化するコンテンツに合わせて十分に大きくしようとすると、あまり良くありません。

ハックの回避策は、iframeの高さをコンテンツよりも小さくするのに十分な高さに確実に高さを設定して、高さを再計算し、scrollHeightをリセットすることです。

var frame = top.document.getElementById('iFrameParentContainer').getElementsByTagName('iframe')[0];
var body = frame.contentWindow.document.body;
var height = body.scrollHeight; // possibly incorrect
body.height = "1px";
height = body.scrollHeight; // correct

これはわずかなちらつきを引き起こす可能性がありますが、通常、少なくとも私のマシンでは動作しません（tm）。

3
InfinitiesLoop

ロード時にこの関数を呼び出します

heightIncrement:function(){     
           if($.browser.mozilla)
           { 
             var heightDiv   = jQuery("iframe",top.document).contents().attr("height")+"px";                    
             jQuery("iframe",top.document).css({height:heightDiv});
           }
           else if($.browser.opera  || $.browser.safari || $.browser.msie)
           {               
             var heightDiv   = jQuery("iframe",top.document).height();                   
             jQuery("iframe",top.document).css({height:heightDiv}); 
           } 
}

contents（）なしで使用すると、ゼロが返されます。

1
Saravanan

これは私のために働いたシンプルなjQueryです。 Explorer、Firefox、Chromeでテスト済み：

 $('#my_frame').load(function () {  
      $(this).height($(this).contents().find("html").height()+20);
});

スクロールバーを避けるために20ピクセルを追加していますが、下限を試してみてください。

1
Carlos Quintero

Iframeソースがその親とは異なるドメインである場合、おそらく easyXDM を使用する必要があります。

0
dsjoerg

私はこれを使用します：

$（ '＃iframe'）。live（ 'mousemove'、function（event）{

var theFrame = $（this、parent.document.body）;

this.height（$（document.body）.height（）-350）;
}）;

0
Idham Perdameian

人々が自分の方法に満足しているかどうかはわかりませんが、最新のSafari、Chrome、IE9、Opera、Firefoxで非常に簡単に動作するように思える非常にシンプルなアプローチを作成しました。

IFrameにフィードされたGoogleカレンダーのサイズを変更する際に問題が発生したため、iFrameのスタイルでデフォルトのサイズを設定しました：width = "600"および基本的に必要な最大の高さ設定980 100％の高さと幅、それぞれ400pxと300pxのmin-heightとmin-widthのコンテナDivで、onloadとonresizeで実行するjQueryを追加しました...

        <script>

        var resizeHandle = function(){
            var caseHeight = $('#calendarCase').height();
            var caseWidth = $('#calendarCase').width();
            var iframeWidth = $('#googleCalendar').width(caseWidth - 10);
            var iframeHeight = $('#googleCalendar').height(caseWidth - 10);;
        };


</script>


<body id ="home" onLoad="resizeHandle()" onResize="resizeHandle()">

レスポンシブデザインで携帯電話とタブレットをターゲットにしているため、サイズ変更関数はonLoadを実行します。これは、calendarCase divの高さと幅を取得し、iframe（#googleCalendar）の高さと幅をそれに応じてマイナス10ピクセルに設定しますいくつかのパディング用。

編集 caseFrameを使用してiFrameの高さを設定し、比率を制限し、どこかで正方形にすることを忘れました。

これは今のところうまくいきました。誰かがそれが安定しないかもしれない理由を知っているなら、アドバイスしてください、

乾杯

0
user482024

Iframeの読み込み時にiframeの高さと幅のサイズを変更しました。基本的には次のようにこれを行うことができ、ブログにも小さな記事を投稿します： http://www.the-di-lab.com/?p=28

 
 $（ "。colorbox"）。colorbox（
 
 {iframe：true、
 
 innerWidth：0、
 
 innerHeight：0、
 
 scrolling：false、
 
 onComplete：function（）{
 
 $。colorbox.resize（
 
 {
 
 innerHeight：（$（ 'iframe'）。offset（）。top + $（ 'iframe '）.height（））、
 
 innerWidth：（$（' iframe '）。offset（）。left + $（' iframe '）。width（））
 
} 
 
）; 
 
} 
 
} 
 
 ）;
0
XuDing