Як вам відомо, в Internet Explorer подія window.resize запускається, коли будь-який елемент на сторінці змінюється. Немає значення, чи буде змінено розмір елемента сторінки шляхом присвоєння / зміни його атрибута висоти або стилю, шляхом простого додавання до нього дочірнього елемента або чого завгодно - навіть якщо розмір елемента не впливає на розміри самого вікна перегляду.

У моєму додатку це спричиняє неприємну рекурсію, оскільки в моєму обробнику window.resize я змінюю розмір деяких елементів <li>, що, у свою чергу, повторно запускає window.resize тощо. Знову ж, це лише проблема в IE.

Чи є спосіб запобігти запуску window.resize в IE у відповідь на елементи на сторінці, що змінюється?

Слід також зазначити, що я використовую jQuery.

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

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

Тепер, коли я встановлюю властивість LEFT css для доданого div, подія 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;
});

Отже, він в основному перевірятиме, чи змінюється висота чи ширина (що відбуватиметься ТІЛЬКИ тоді, коли ви фактично зміните розмір за допомогою вікна).

це мало сенс для мене і, схоже, працює в 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();


        }
    });

Зв’яжіть слухач зміни розміру, .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()але я кинув його туди як про всяк випадок і для додаткового регулювання.

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

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;

Відповідь @ 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
});

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

Для цього, до речі, потрібен прототип.

Поєднання методу 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 );

Ви можете спробувати це:

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

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

(function ($){
     //if ie8 -> return;
     var lastHeight = 0;
     var lastWidth = 0;
     $(window).resize(function(event){
         if (window.innerHeight == lastHeight && window.innerWidth == lastWidth)
             { event.stopImmediatePropagation(); }
         lastHeight = window.innerHeight;
         lastHeight = window.innerWidth;
     });
})();

робить трюк для мене ...

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

Ось як я маю справу з з’ясуванням того, чи відбулася подія зміни розміру елементом або дійсно змінивши розмір вікна:

Якщо цільової події 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
    }
});

Я не зміг запустити подію зміни розміру, коли елемент змінив розмір (хоча це спробувалося лише в IE8).

Однак що таке targetоб’єкт події, коли ви стикаєтесь із цією проблемою, чи можете ви зробити це:

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

Мій патч:

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

Це залежить від того, яким буде вміст події зміни розміру.

Я з’ясував, що вищевказане вирішує лише тоді, коли сторінка складається зі статичного вмісту, а не динамічно відтворюваного. У динамічному випадку, коли наявний вміст буде повторно відтворений якоюсь подією тригера, як функція перезавантаження вмісту, нам потрібно використовувати замість цього $ (document) .width () або $ (document) .height ().

Це пов’язано з смугою прокрутки вікна. Якщо на сторінці є смуга прокрутки, а основний вміст буде відтворений повторно, натиснувши кнопку «Перезавантажити», смуга прокрутки зникає під час події. У цьому випадку $ (window) .width () або $ (window) .height () змінюється за допомогою візуалізації вмісту, а не за фактичним зміною розміру вікна.

http://www.tech-step.net/?p=466

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