在Chrome和FireFox中,窗口调整大小两次,但在Safari中只有一个

时间:2012-12-17 14:56:32

标签: javascript jquery window-resize

我使用此代码在最新版本的Chrome,FX和Safari下进行测试。如果我按下最大化按钮,它将在FX和Chrome中触发两次,但在Safari中只会触发一次。我使用的是Windows 7.令人惊讶的是,如果我使用的是Windows XP,Chrome将会激活两次FX,Safari会触发一次。是否可以保证它会发射两次?谢谢

$(window).resize(function() {

    if (!isiPhone()) {
        if ($(".viewportBinder").length){                   
            $("#view").css('height',$(window).height());
            $("#view").css('width',$(window).width());  
            content = element.viewport('update'); 
        }

        var h = screen.height;
        var w = screen.width;

        $(window).css("height",h);
        $(window).css("width",w);

        Book.book_position();
        Book.zoom_auto();

        /*
        var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
        var is_safari = navigator.userAgent.indexOf("Safari") > -1;

        if ((is_firefox)||(is_safari))*/
        alert ('test');
    }   

});

3 个答案:

答案 0 :(得分:1)

这不是问题。它取决于浏览器。你需要处理这种情况。

如果参数相同,如何记住你的上一个动作并忽略它。

您可以编写如下代码:

function myResizer() {
    if (!isiPhone()) {
        if ($(".viewportBinder").length) {                   
            var height, width;
            height = $(window).height();
            width = $(window).width();
            if ((myResizer.height !== height) || (myResizer.width !== width)) {
                $("#view").css('height',$(window).height());
                $("#view").css('width',$(window).width());  
                content = element.viewport('update'); 
                myResizer.height = height;
                myResizer.width = width;
            }
        }

        var h = screen.height;
        var w = screen.width;

        if ((myResizer.h !== h) || (myResizer.w !== w)) {
            $(window).css("height",h);
            $(window).css("width",w);

            Book.book_position();
            Book.zoom_auto();
            myResizer.h = h;
            myResizer.w = w;
        }
    }   
}

$(window).resize(myResizer);

答案 1 :(得分:1)

如果您调整浏览器的大小,则调整大小事件不会触发...它会多次触发,可能对于每个像素,不知道。这取决于浏览器...

另见:javascript resize event firing multiple times while dragging the resize handle

答案 2 :(得分:1)

我认为,这不是一个大问题。我解决了这个问题,通常使用调整大小时触发的方法。

var after_resize = (function(){
var timer = 0;
return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
};
})();
$(window).resize(function() {
after_resize(function(){
    alert("resize finish!");
}, 300);
});