-1

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

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 的锚元素。如果有人单击该链接，该 URL 将在幻想框中以 iFrame 的形式打开。如果没有达到一定的宽度，我的目标是不打开花式框。相反，它应该充当普通链接并在新选项卡中打开。仅当宽度大于 640 像素时，它才应在花式框中作为 iFrame 打开。

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

我想我会保持原样，因为我不知道任何其他解决方案可以解决我的问题。

4

3 回答 3

3

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

var windowWidth = window.innerWidth;

window.onresize = function() {
  windowWidth = window.innerWidth;
  // do something with the new width
};
于 2012-12-01T11:19:11.377 回答
0

如果您曾经将事件处理程序附加到窗口的调整大小事件，您可能已经注意到，虽然 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/

于 2012-12-01T11:28:32.270 回答
0

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

$(window).on('resize', function() {
    checkWidth();
});
​
于 2012-12-01T11:20:15.610 回答