window.resize事件在Internet Explorer中觸發

Question

如您所知，在Internet Explorer中，window.resize事件在頁面上的任何元素被調整大小時觸發。無論頁面元素是通過分配/更改其高度還是樣式屬性，通過簡單地向其添加子元素或任何其他元素來調整大小，即使元素調整大小不會影響視口本身的尺寸。

在我的應用程序，這是造成討厭的遞歸，因爲在我的window.resize處理程序，我調整了一些<李>元素，這反過來又重新火window.resize，等等。再一次，這只是一個問題在IE中。

有沒有什麼辦法來防止window.resize在IE中觸發響應頁面上的元素被調整大小？

我還應該提到我正在使用jQuery。

Answer 1

當調整元素大小時，我無法獲取調整大小事件（僅在IE8中嘗試過）。

然而什麼是事件對象的target當你遇到這個問題，你可以這樣做：

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

Answer 2

我剛剛發現了另一個問題，這可能會幫助你。

我使用jQuery和我有window.resize事件來調用一個函數，將重新定位附加到正文的div。

現在，當我設置該附加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; 
}); 

所以基本上如果高度或寬度改變，它會檢查（當你真正用窗口調整這隻會發生）。

Answer 3

我今天就遇到了這個問題，並決定把我的世界的頂部下面包含的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; 
}); 

這需要原型，順便說一句。

Answer 4

我的補丁：

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

Answer 5

我解決它通過解除綁定的調整大小功能，重建頁面，然後再結合大小調整功能：

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

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

編輯

綁定和取消綁定唐不適合IE8。雖然微軟甚至放棄了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 6

這對我有意義，似乎在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 7

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

Answer 8

的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 9

綁定你的聽衆調整大小與.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 10

@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 11

這取決於調整大小事件的內容。

只有當頁面包含靜態內容而不是動態呈現的頁面時，我纔想出了上述解決方案。 在動態情況下，現有內容將通過內容重載功能等某些觸發事件重新呈現，我們需要使用$（document）.width（）或$（document）.height（）。

這是因爲窗口的滾動條。 如果頁面上有滾動條，並且主要內容將通過單擊「重新加載」按鈕來重新呈現，則滾動條會在事件中消失。 在這種情況下，$（window）.width（）或$（window）.height（）由內容渲染改變，而不是由實際的窗口大小調整。

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

Answer 12

你可以試試這個：

構造：

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 ... 
} 

對於互聯網瀏覽R，Chrome瀏覽器，火狐，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 13

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

的伎倆我...

Answer 14

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

Answer 15

下面是我如何處理調查大小事件是如何處理通過元素觸發或通過真正調整窗口大小：

如果事件的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 
    } 
});