Pertanyaan window.resize event firing di Internet Explorer


Seperti yang Anda ketahui, di Internet Explorer, peristiwa window.resize diaktifkan ketika elemen apa pun di halaman diubah ukurannya. Tidak masalah apakah elemen halaman diubah ukurannya dengan menetapkan / mengubah atribut ketinggian atau gaya, cukup dengan menambahkan elemen anak ke elemen tersebut, atau apa pun - meskipun perubahan ukuran elemen tidak mempengaruhi dimensi area pandang itu sendiri.

Dalam aplikasi saya, ini menyebabkan rekursi yang buruk, karena di jendela saya. Resize handler Saya mengubah ukuran beberapa elemen <li>, yang pada gilirannya menyalakan kembali window.resize, dll. Sekali lagi, ini hanya masalah di IE.

Apakah ada cara untuk melakukannya mencegah window.resize dari firing di IE dalam menanggapi elemen pada halaman yang diubah ukurannya?

Saya juga harus menyebutkan bahwa saya menggunakan jQuery.


75
2017-12-05 17:06


asal


Jawaban:


Saya baru saja menemukan masalah lain yang mungkin bisa membantu Anda.

Saya menggunakan jQuery dan saya memiliki acara window.resize untuk memanggil fungsi yang akan mengembalikan posisi div yang ditambahkan ke badan.

Sekarang ketika saya mengatur properti css KIRI dari div yang ditambahkan, acara window.resize mendapatkan pemicu untuk TIDAK ADA ALASAN BAIK.

Ini menghasilkan loop tak terbatas, memicu jendela. Resize lagi dan lagi.

Kode tanpa perbaikan:

$(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);
});

Larutan:

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;
});

Jadi pada dasarnya itu akan memeriksa apakah tinggi atau lebar diubah (yang akan terjadi HANYA ketika Anda benar-benar mengubah ukuran dengan jendela).


58
2017-12-17 11:55



ini masuk akal bagi saya dan tampaknya bekerja di IE7 dan di atasnya:

    //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();


        }
    });

25
2018-01-08 11:21



Ikat listener resize Anda dengan .one() agar tidak lepas sendiri setelah menembak. Kemudian Anda dapat melakukan apa pun yang Anda inginkan, asalkan pada akhirnya Anda akan memutar ulang pendengar yang mengubah ukuran. Saya menemukan cara termudah untuk melakukan ini adalah dengan menempatkan pendengar mengubah ukuran dalam fungsi anonim seperti:

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

    //resize things

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

Anda tidak secara teknis membutuhkan setTimeout melilit resizeListener() tapi saya melemparkannya di sana sebagai just-in-case dan untuk beberapa tambahan yang berlebihan.


18
2017-11-08 21:21



Saya memecahkannya dengan tidak mengikat fungsi resize, membangun kembali halaman dan kemudian mengikat fungsi resize lagi:

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

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

EDIT

Bind dan unbind tidak cocok dengan IE8. Meskipun Microsoft bahkan menyerah pada IE8 Anda mungkin ingin mencoba ini (belum diuji!):

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

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

5
2017-10-31 14:07



Jawaban @AamirAfridi.com memecahkan masalah saya.

Merupakan ide yang bagus untuk menulis fungsi bersama untuk menyelesaikan hal-hal seperti itu:

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();
        }
    });
}

Gunakan seperti ini, dan Anda tidak perlu khawatir tentang perilaku yang berbeda di IE lagi:

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

4
2017-07-26 10:02



Saya mengalami masalah ini hari ini dan memutuskan untuk meletakkan yang berikut ini di bagian atas file javascript yang disertakan secara global:

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;
});

Itu membutuhkan Prototipe, ngomong-ngomong.


1
2017-10-07 15:20



Campuran dari unbind / bind metode dengan panggilan tertunda. Ia bekerja di Internet Explorer 8 dan di bawahnya, mencegah lingkaran jahat dan tergantung pada versi 6 dan 7.

function resizeViewport()
{
    // Unbind and rebind only for IE < 9
    var isOldIE = document.all && !document.getElementsByClassName;

    if( isOldIE )
        $(window).unbind( 'resize', resizeViewport );

    // ...

    if( isOldIE )
    {
        setTimeout(function(){
            $(window).resize( resizeViewport );
        }, 100);
    }
}

$(window).resize( resizeViewport );

1
2017-08-22 16:07