Question

我编写了一个jQuery脚本，用于检查窗口大小并增加外部包装以完全适合用户窗口。

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中打开此链接，因为它会导致浏览器崩溃）

是的，有人可以帮帮我吗？提前致谢

Answer 1

这部分非常不可靠：

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

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

如果您的条件是针对一个维度（width）并且您所做的更改是另一个维度（.newcontainer），则循环将从未运行，或者可能永远运行，或者可能随机运行。

如果height元素有最大高度或最大宽度，则应计算width或var windowHeight = $(window).height(); var maximumContainerHeight = windowHeight - 30; $('.newcontainer').css('height', maximumContainerHeight + 'px');的允许值，并将其设置为一次，不是循环！这样的事情，也许是：

{{1}}

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

如果您正在做的事情是设置某些内容的宽度，希望布局引擎会影响高度作为副作用，那么您将采用非常错误的方式。

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

Answer 2

没有循环就把它弄清楚了。可能对其他人有帮助。

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

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

2 个答案: