Question

我想每次检查窗口的宽度（甚至在浏览器调整大小时）。这是我的功能：

function checkWidth() {
    var width =  $(window).width()
    if(width > 640){
        return true;
    }else{
        return false;
    }
            alert(width);
}
if(checkWidth()){
    $(function(){
        $("#fancylink").fancybox({
            'type': 'iframe',
            'width': 900,
            'height': 600,
            'autoScale': false
        }); 
    });
}

但宽度只检查一次。原因是我认为我的查询是在外部，因此只检查页面加载。我该如何重构我的代码呢？

修改

fancybox在ID为fancylink的元素上实例化。在这种情况下，它是具有特定URL的锚元素。如果有人点击链接，此网址将在fancybox中以iFrame格式打开。我的目标是如果没有达到某个宽度，就不要打开fancybox。相反，它应该充当普通链接并在新选项卡中打开。仅当宽度为例如超过它应该在fancybox中以iFrame打开的640px。

因此，我必须检查浏览器调整大小时的浏览器宽度，或者设备方向是否从纵向更改为横向。在我的代码中fancybox将被实例化，如果在页面加载时达到或不符合宽度。但是，如果设备方向更改或浏览器调整大小，则此功能不再起作用。有解决方案吗？

我想我会保留它，因为我不知道任何其他解决方案。

Answer 1

您应该为窗口大小调整设置一个事件监听器：

var windowWidth = window.innerWidth;

window.onresize = function() {
  windowWidth = window.innerWidth;
  // do something with the new width
};

Answer 2

您必须将其绑定到窗口的resize事件。

$(window).on('resize', function() {
    checkWidth();
});

Answer 3

如果你曾经在窗口的resize事件中附加了一个事件处理程序，你可能已经注意到，虽然Firefox会慢慢地触发事件，但是IE和Webkit完全是痉挛性的。

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null; 
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100); 
      };
  }
    // smartresize 
    jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){  
    checkWidth();
});

参考：http://paulirish.com/2009/throttled-smartresize-jquery-event-handler/

根据浏览器的宽度，让fancybox可以正常工作

3 个答案: