jQuery脚本在Firefox中创建无限循环（仅限于）

我编写了一个jQuery脚本，它检查窗口大小并增加外部包装以完全适合用户窗口。jQuery脚本在Firefox中创建无限循环（仅限于）

function reSize($target){ 
    $target.css('width', $(window).width()+'px'); 
} 
$(document).ready(function(){ 
    setTimeout(function() { 
     $(window).bind('resize', reSize($('#blocker'))); 
     $(window).trigger('resize'); 

     while($(window).height() < $('.newcontainer').height()+30){ 
      $('.newcontainer').css('width', $('.newcontainer').width() - 10 +'px'); 
     } 

     $('#chatfenster').css('height', $('.newcontainer').height() - 260 +'px'); 
     $('#userlist').css('height', $('.newcontainer').height() - 350 +'px'); 
    }, 100); 
});

它的工作原理非常顺利在Chrome和Safari但在Firefox它冻结，我不知道为什么。有时我觉得Firefox是新的IE。

http://design.maxxcoon.com/bestlife/webinar_chat/

任何人可以帮助我请（，因为它崩溃的浏览器不会在Firefox中打开此链接）？在此先感谢

来源

2016-03-07 Shaggy

'有时候我觉得Firefox是新IE.'有时用户编码非标化掷骰子，在一个马车铬（-webkit- overprefixed代码）的作品，但标准正相反。 Firefox按标准所述工作。 –

而且请**，附上一个工作示例，而不是一个你知道冻结浏览器的网页!!!! **。仔细阅读：http://stackoverflow.com/help/how-to-ask || http://stackoverflow.com/help/mcve –

只是一个提示：每个jquery选择你应该存储在一个变量和重用，以及..如果你需要重复使用它几次。所以'var $ window = $（window）;'一次并重用'$ windows'。 '.newcontainer'一样的东西。不要为同一个元素启动一个新的jQuery选择。 – Christophe

这部分是非常不可靠的：

while($(window).height() < $('.newcontainer').height()+30){ 
     $('.newcontainer').css('width', $('.newcontainer').width() - 10 +'px'); 
    }

您检查对第一个元素的height与newcontainer一个class发现窗口height。只要窗口的高度小于该高度加上30像素，就可以将所有元素的width设置为class="newcontainer"，比其中第一个元素的width小10。

如果你的条件是一个维（height）和另一个维度（width）所做的更改是，循环运行或者从未，或可能永远，也可能随机...

如果有是您的.newcontainer元素的最大高度或最大宽度，您应该计算height或width的允许值，并将它们设置为一次，不在循环中！像这样的东西，也许：

var windowHeight = $(window).height(); 
var maximumContainerHeight = windowHeight - 30; 
$('.newcontainer').css('height', maximumContainerHeight + 'px');

但是，我不知道是否要设置宽度或高度，所以我猜测。

如果你正在做的事情是真的设置一些东西的宽度，希望布局引擎会影响高度作为一个副作用，你会在这是非常错误的方式。

另一个更好的解决方案是使用现代CSS解决方案（如flexbox）来让浏览器自动处理所有布局问题。

来源

2016-03-07 15:42:59

感谢您的反馈！我希望整个框架（.newcontainer）适合浏览器的窗口，所以不应该有任何滚动条。 – Shaggy

感谢您的反馈！我希望整个框架（newcontainer）适合浏览器的窗口，所以不应该有任何滚动条。当我设置宽度时，我可以让CSS用高度来完成其余的工作，但这不能以另一种方式工作，所以我需要设置（newcontainer）的宽度。它的行为应该像在Chrome或Safari中一样。所以不需要改变效果。我只想做没有任何错误的权利。首先我检查newcontainer是否高于window.height（如果是，那意味着它在窗口外面）。如果是这样，我只要想要增加宽度就可以。 – Shaggy

顺便说一句。 flexbox不是一个选项，因为它不支持IE8或IE9 – Shaggy

没有循环就算出来了。可能有助于他人。

<script type="text/javascript"> 

function reSize($target){ 
$target.css('width', $(window).width()+'px'); 
} 
$(document).ready(function(){ 
setTimeout(function() { 
    $(window).bind('resize', reSize($('#blocker'))); 
    $(window).trigger('resize'); 

    var windowSize = $(window).height(); 
    var containerHeight = $('.newcontainer').height(); 
    var containerWidth = $('.newcontainer').width(); 

    if(containerHeight > windowSize){ 
     var pixelToMuch = containerHeight - windowSize; 
     var divFactor = pixelToMuch * 1.67; 
     var newWidth = containerWidth - divFactor; 
     $('.newcontainer').css('width',newWidth+'px'); 
    } 

    $('#chatfenster').css('height', $('.newcontainer').height() - 260 +'px'); 
    $('#userlist').css('height', $('.newcontainer').height() - 350 +'px'); 
}, 100); 
}); 
</script>

来源

2016-03-07 17:29:07 Shaggy

jQuery脚本在Firefox中创建无限循环（仅限于）

回答

相关问题