Question

我用jquery获取windows大小？

winWidth = $(window).width();

$("#status").text(winWidth);

我已插入此内容，但我只获得一次。如果我缩小窗口，则值相同。有一种方式，这个“事件”可以永远是听众吗？

最好的问候

Answer 1

在jQuery中使用.resize()事件。当你改变窗口大小时，它会更新大小。在你的情况下，它是固定的。当页面加载时计算得到。所以你需要更新那个大小当窗口调整大小时。

var winWidth  = 0;
$(window).resize(function() {
  winWidth = $(window).width();
  $("#status").text(winWidth);
});

Answer 2

使用jqueries resize()事件。

var winWidth = $(window).width();

$(window).resize(function(){
    winWidth = $(window).width();
});

Answer 3

如果您挂钩调整大小事件并对每次更改进行大量处理，您将冻结浏览器，因为调整大小事件会在桌面上触发几百个每秒。

您需要对该功能进行一些去抖动：

function updateOrientation() {
    // Detect whether device supports orientationchange event, otherwise fall back to the resize event
    // Genius solution from http://stackoverflow.com/a/2307936
    var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize", newAngle;

    if(supportsOrientationChange){
        newAngle = window.orientation;
        switch(newAngle){
            case 0:
            case 180: newOrientation = 'portrait'; break;
            case 90:
            case -90: newOrientation = 'landscape'; break;
        }
    } else {
        if(document.width < document.height){
            newOrientation = 'portrait'
        } else {
            newOrientation = 'landscape'
        }
    }

    // Do some processing here

    /*
     * Beautiful debouncing for resize event firing too much on the PC
    * by Pim Jager http://stackoverflow.com/a/668185/930987
    */
    resizeEvent = false;

    window.addEventListener(orientationEvent, function() {
        if(!resizeEvent) {
            clearTimeout(resizeEvent);
            resizeEvent = setTimeout(updateOrientation, 500)
        }
    })
   }

使用jQuery持续获取窗口大小

3 个答案: