没有修复的代码：

Question

如您所知，在Internet Explorer中，当页面上的任何元素调整大小时会触发window.resize事件。通过分配/更改页面元素是否调整页面元素的大小无关紧要高度或样式属性，只需向其添加子元素，或其他任何东西 - 即使元素大小调整不影响视口本身的尺寸。

在我的应用程序中，这导致了令人讨厌的递归，因为在我的window.resize处理程序中我正在调整一些＆lt; li＆gt;元素，反过来重新触发window.resize等。再次，这只是IE中的一个问题。

有没有办法阻止window.resize在IE中触发以响应正在调整大小的页面上的元素？

我还应该提到我正在使用jQuery。

Answer 1

我刚刚发现了另一个可能对你有帮助的问题。

我正在使用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 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()绑定调整大小侦听器，以便在触发后解除绑定。然后你可以做任何你想做的事情，只要最后你重新调整resize监听器。我发现最简单的方法是将调整大小监听器放在一个匿名函数中，如下所示：

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()缠绕在{{1}}上，但我会把它作为一个只是在案件中并且用于一些额外的限制。

Answer 4

我通过解除调整大小函数，重建页面然后再次绑定调整大小函数来解决它：

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 5

@ 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

我今天遇到了这个问题，并决定将以下内容放在我的全局包含的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 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

你可以试试这个：

构造

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 9

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

Answer 11

以下是我如何处理查找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 12

当元素调整大小时，我无法触发resize事件（仅在IE8中尝试过）。

但是当您遇到此问题时，事件对象上的target是什么，您可以这样做：

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

Answer 13

我的补丁：

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

Answer 14

由resize事件中的内容决定。

我发现只有当一个页面包含静态内容而不是动态呈现的页面时，才能解决上述问题。在动态情况下，现有内容将由某些触发器事件（如内容重载函数）重新呈现，我们需要使用$（document）.width（）或$（document）.height（）代替。

这是因为窗口的滚动条。如果页面具有滚动条，并且通过单击“重新加载”按钮将重新呈现主要内容，则滚动条将在事件上消失。在这种情况下，$（window）.width（）或$（window）.height（）由内容呈现更改，而不是通过实际窗口大小调整。

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

Answer 15

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

在Internet Explorer中触发window.resize事件

15 个答案:

没有修复的代码：

解决方案：