запуск события window.resize в Internet Explorer

Question

Как вам известно, в Internet Explorer событие window.resize вызывается при изменении размера любого элемента на странице. Не имеет значения, был ли размер элемента страницы изменен путем назначения / изменения его высоты или атрибут style, просто добавив к нему дочерний элемент или что-то еще, даже если изменение размера элемента не влияет на размеры самого окна просмотра.

В моем приложении это вызывает неприятную рекурсию, так как в моем обработчике window.resize я изменяю размеры некоторых

элементов, что, в свою очередь, перезапускает window.resize и т. Д. Опять же, это только проблема в IE.

Есть ли способ предотвратить запуск window.resize в IE в ответ на изменение размеров элементов на странице?

Я должен также упомянуть, что я использую jQuery.

Answer 1

Я только что обнаружил другую проблему, которая может вам помочь.

Я использую jQuery, и у меня есть событие window.resize для вызова функции, которая переместит div, добавленный к телу.

Теперь, когда я установил свойство LEFT css этого добавленного div, событие window.resize получает триггер для НЕТ ХОРОШЕЙ ПРИЧИНЫ.

В результате получается бесконечный цикл, снова и снова запускающий 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;
});

Таким образом, в основном он будет проверять, изменились ли высота или ширина (что произойдет ТОЛЬКО, когда вы на самом деле измените размер с окном).

Answer 2

это имело смысл для меня и, кажется, работает в 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();


        }
    });

Answer 3

Свяжите своего слушателя изменения размера с .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(), но я бы бросил его туда как на всякий случай и для некоторого дополнительного регулирования.

Answer 4

Я решил эту проблему, отсоединив функцию изменения размера, перестроив страницу и снова связав функцию изменения размера:

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

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

EDIT

Bind и unbind не подходят для 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;

Answer 5

Ответ * 1000000@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
});

Answer 6

Вы можете попробовать это:

Конструктор:

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

Answer 7

Смесь метода unbind / bind с отложенным вызовом. Он работает в Internet Explorer 8 и ниже, предотвращая злой цикл и зависает в версиях 6 и 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 );

Answer 8

Я столкнулся с этой проблемой сегодня и решил поместить в начало моего глобального включенного файла 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;
});

Кстати, для этого нужен Prototype.

Answer 9

Вот как я могу выяснить, было ли событие resize запущено элементом или действительно изменило размер окна:

Если событие target.nodeType не существует, это, скорее всего, окно, так как любой другой элемент на странице будет иметь nodeType.

Итак, вот псевдокод (с использованием jQuery) с добавленной проверкой:

$(window).resize(function(event){
    if ( $(event.target.nodeType).length == 0 ){
        // Anything here is run when the window was resized
        // not executed when an element triggered the resize
    }
});

Answer 10

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