javascript - Internet Explorer で発生する window.resize イベント

Question

ご存じのように、Internet Explorer では、ページ上の要素のサイズが変更されると、window.resize イベントが発生します。要素のサイズ変更がビューポート自体の寸法に影響を与えなくても、高さまたはスタイル属性の割り当て/変更、単に子要素の追加などによってページ要素のサイズが変更されるかどうかは問題ではありません。

私のアプリケーションでは、window.resize ハンドラーでいくつかの <li> 要素のサイズを変更しているため、これは厄介な再帰を引き起こしています。これは、window.resize などを再起動します。

ページ上の要素のサイズが変更されたことに応じて、IE で window.resize が起動しないようにする方法はありますか?

私はjQueryを使用していることにも言及する必要があります。

score 60 · Accepted Answer

私はちょうどあなたを助けるかもしれない別の問題を発見しました.

私はjQueryを使用しており、ボディに追加されたdivを再配置する関数を呼び出すwindow.resizeイベントがあります。

追加された div の LEFT css プロパティを設定すると、window.resize イベントが NO GOOD REASON のトリガーを取得します。

無限ループが発生し、window.resize が何度もトリガーされます。

修正なしのコード:

$(window).resize(function(){
    var onResize = function(){
        //The method which alter some css properties triggers 
        //window.resize again and it ends in an infinite loop
        someMethod();
    }
    window.clearTimeout(resizeTimeout);
    resizeTimeout = window.setTimeout(onResize, 10);
});

解決：

var winWidth = $(window).width(),
    winHeight = $(window).height();

$(window).resize(function(){
    var onResize = function(){
        //The method which alter some css properties triggers 
        //window.resize again and it ends in an infinite loop
        someMethod();
    }

    //New height and width
    var winNewWidth = $(window).width(),
        winNewHeight = $(window).height();

    // compare the new height and width with old one
    if(winWidth!=winNewWidth || winHeight!=winNewHeight){
        window.clearTimeout(resizeTimeout);
        resizeTimeout = window.setTimeout(onResize, 10);
    }
    //Update the width and height
    winWidth = winNewWidth;
    winHeight = winNewHeight;
});

したがって、基本的には、高さまたは幅が変更されたかどうかを確認します（実際にウィンドウのサイズを変更した場合にのみ発生します）。

score 25 · Accepted Answer

これは私には理にかなっていて、IE7以降で動作するようです:

    //variables to confirm window height and width
    var lastWindowHeight = $(window).height();
    var lastWindowWidth = $(window).width();

    $(window).resize(function() {

        //confirm window was actually resized
        if($(window).height()!=lastWindowHeight || $(window).width()!=lastWindowWidth){

            //set this windows size
            lastWindowHeight = $(window).height();
            lastWindowWidth = $(window).width();

            //call my function
            myfunction();


        }
    });

score 19 · Accepted Answer

サイズ変更リスナーをバインドして.one()、起動後にバインドを解除します。その後、最後にサイズ変更リスナーを再バインドする限り、必要なことは何でもできます。これを行う最も簡単な方法は、次のようにサイズ変更リスナーを匿名関数に入れることです。

var resizeListener = function(){
  $(window).one("resize",function(){ //unbinds itself every time it fires

    //resize things

    setTimeout(resizeListener,100); //rebinds itself after 100ms
  });
}
resizeListener();

setTimeout技術的にはラップする必要はありませんが、resizeListener()念のため、および追加のスロットリングのためにそこに入れました。

score 5 · Accepted Answer

サイズ変更関数のバインドを解除し、ページを再構築してから、サイズ変更関数を再度バインドすることで解決しました。

function rebuild() {
   $(window).unbind('resize');
   /* do stuff here */
   $(window).bind('resize',rebuild);
}

$(window).bind('resize',rebuild);

編集

IE8 ではバインドとアンバインドがうまくいきません。Microsoft は IE8 をあきらめましたが、これを試してみてください (未テスト!):

function rebuild(){
   if(!window.resizing) return false;
   window.resizing=true;
   /* do stuff here */
   window.resizing=false;
}

window.resizing=false;
document.body.onresize=rebuild;

score 4 · Accepted Answer

@ AamirAfridi.comの回答で問題が解決しました。

このような問題を解決するための共通関数を作成することをお勧めします。

function onWindowResize(callback) {
    var width = $(window).width(),
        height = $(window).height();

    $(window).resize(function() {
        var newWidth = $(window).width(),
            newHeight = $(window).height();

        if (newWidth !== width || newHeight !== height) {
            width = newWidth;
            height = newHeight;
            callback();
        }
    });
}

次のように使用すると、IE の動作の違いを気にする必要がなくなります。

onWindowResize(function() {
    // do something
});

score 1 · Accepted Answer

今日、この問題に遭遇したため、グローバルインクルード JavaScript ファイルの先頭に次のコードを追加することにしました。

var savedHeight = 0;
var savedWidth = 0;
Event.observe(window, 'resize', function (e) {
    if (window.innerHeight == savedHeight && 
        window.innerWidth == savedWidth) { e.stop(); }
    savedHeight = window.innerHeight;
    savedWidth = window.innerWidth;
});

ちなみに、それにはプロトタイプが必要です。

score 1 · Accepted Answer

これを試すことができます：

コンストラクタ：

this.clientWidth = null;
this.clientHeight = null;

いくつかの機能:

var clientWidth = window.innerWidth || document.documentElement.clientWidth; 
var clientHeight = window.innerHeight || document.documentElement.clientHeight;
if (clientWidth != this.clientWidth || clientHeight != this.clientHeight ) {
    this.clientWidth = clientWidth;
    this.clientHeight = clientHeight;

    ... YOUR CODE ...
}

Internet Explorer、Chrome、Firefox、Opera、および Safari の場合:

window.innerHeight - the inner height of the browser window
window.innerWidth - the inner width of the browser window

Internet Explorer 8、7、6、5 の場合:

document.documentElement.clientHeight
document.documentElement.clientWidth
    or
document.body.clientHeight
document.body.clientWidth

score 0 · Accepted Answer

<pre>



var cont = 0;
var tmRsize = 100;
var lastWindowWidth = $(window).width();
var lastWindowHeight = $(window).height();

/*****redimensionamiento**********/
$(window).resize(function()
{
    if($(window).width() != lastWindowWidth || $(window).height() != lastWindowHeight)
    {
        clearTimeout(this.id);
        this.tiempo = tmRsize;
        this.id = setTimeout(doResize, this.tiempo);
    }
});

function doResize()
{
    lastWindowWidth = $(window).width();
    lastWindowHeight = $(window).height();

    $('#destino_1').html(cont++);
}

score -1 · Accepted Answer

要素のサイズが変更されたときに resize イベントを発生させることができませんでした (IE8 でのみ試しました)。

ただし、targetこの問題が発生したときのイベントオブジェクトはどうなっていますか?

$(window).resize(function(e) {
    if( e.target != window ) return;
    // your stuff here
});

score -1 · Accepted Answer

私のパッチ:

<!--[if lte IE 7]>
<script type="text/javascript">
  window.onresize = null;       // patch to prevent infinite loop in IE6 and IE7
</script>
<![endif]-->

score -2 · Accepted Answer

リサイズイベントの内容次第です。

上記の解決策は、ページが動的にレンダリングされたものではなく、静的なコンテンツで構成されている場合にのみ解決されることがわかりました。既存のコンテンツがコンテンツリロード関数のようなトリガーイベントによって再レンダリングされる動的なケースでは、代わりに $(document).width() または $(document).height() を使用する必要があります。

これはウィンドウのスクロールバーによるものです。ページにスクロールバーがあり、[リロード] ボタンをクリックしてメインコンテンツが再レンダリングされる場合、イベントでスクロールバーが消えます。その場合、$(window).width() または $(window).height() は、実際のウィンドウのサイズ変更ではなく、コンテンツのレンダリングによって変更されます。

score -3 · Accepted Answer

$(window).resize(function(event)
{
    if (typeof event.target.tagName == 'undefined')
    {
        // ...
    }
});

javascript - Internet Explorer で発生する window.resize イベント

15 に答える 15

修正なしのコード:

解決：

Related

Reference