0

これは私が書いたJavaScript(jQuery)のビットです。基本的に「文書とウィンドウの高さの差を計算し、その分だけ要素を小さくする」という仕組みです。 (下記参照)IE7で永続的なサイズ変更イベントを引き起こすjQueryリサイズコード

—これは残念ながら私はまだIE7のサポートが必要で、そのブラウザの動作は一種のものです。具体的には、私の関数を呼び出すは別のサイズ変更イベントを発生させ、フィードバックループの一種を引き起こしているようです。

IE7は明らかにこれが起こる唯一のブラウザであり、私はまだそれがどうして起こるかを理解していません。私はすでに何も外れていないことを確認するために目標の高さを小さくしようとしましたが、結果は同じです。

私のコードをIE7でサイズ変更イベントを発生させない最適な方法は何ですか?

function stretchToBottom($element) { 

    (window.onresize = function() { 

     // temporarily reset the element's height so $(document).height() yields the right value 
     $element.css({maxHeight: ''}); 

     var heightDiff = $(document).height() - $(window).height(); 
     if (heightDiff <= 0) { 
      return; 
     } 

     var initialHeight = $element[0].scrollHeight; 
     var minHeight = 200; 
     var targetHeight = initialHeight - heightDiff; 
     var height = Math.max(targetHeight, minHeight); 

     $element.css({maxHeight: height + 'px'}); 

    })(); 

} 

答えて

0

私はちょうど私が持っている、まったく同じ問題を記述したthis questionを発見しました。上の2つの答えは、現在のウィンドウのディメンションを格納し、実際に変更されたときにのみイベントリスナーを処理するという実用的なソリューションを提供しました。

記録のために、私は現在持っている作業コードです。関数名をより正確に変更し、「イベントリスナーを追加」の部分を関数の外に移動しました。

function shrinkToFit($element) { 

    $element.css({maxHeight: ''}); 

    var heightDiff = $(document).height() - $(window).height(); 
    if (heightDiff <= 0) { 
     return; 
    } 

    var initialHeight = $element[0].scrollHeight; 
    var minHeight = 200; 
    var targetHeight = initialHeight - heightDiff; 
    var height = Math.max(targetHeight, minHeight); 

    $element.css({maxHeight: height + 'px'}); 

} 
var lastWindowWidth = $(window).width(); 
var lastWindowHeight = $(window).height(); 
$(window).on('resize', function() { 
    if (lastWindowWidth !== $(window).width() || lastWindowHeight !== $(window).height()) { 
     shrinkToFit($tableContainer); 
     lastWindowWidth = $(window).width(); 
     lastWindowHeight = $(window).height(); 
    } 
}); 
+0

これを今日にわたって横断する。もしあなたが行くのが良ければ、あなた自身の答えを受け入れるべきです! – cjl750

+0

@ cjl750あなたは正しいです、リマインダーのおかげで! – vvye

0

であなたのコードをラップ:

<!--[if !IE7]>--> 
//NONE IE code comes here 
<!--<![endif]--> 

<!--[if IE7]> 
//ONLY IE7 code comes here 
<![endif]--> 

more info here

+0

しかし、それは完全に働いてからコードを停止しないのでしょうか?他のブラウザと同じように動作させたいと思います。 – vvye

+0

私の答えはより明確になるように更新しました、ごめんなさい。 – Peter

+0

申し訳ありませんが、IE特有のコードは何ですか? – vvye

関連する問題