Javascript 根据浏览器的宽度，让fancybox完成它的工作与否

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

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在fancybox中打开。我的目标是，如果没有达到某个宽度，就不要打开fancybox。相反，它应该充当普通链接并在新选项卡中打开。仅当宽度大于640px时，fancybox作为iFrame应打开

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

---

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

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

var windowWidth = window.innerWidth;

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

---

您必须将其绑定到窗口的

resize

事件

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

---

如果您曾经将事件处理程序附加到窗口的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();
});

---

参考：

您需要的是在每次窗口大小更改时对事件启动函数，例如：

$（窗口）。在（'resize'，function（）{…}）

@adeneo:我想您没有遇到我的问题。我想提供一个额外的功能，如果窗口大小足够大。所以，`$（“#fancylink”）.fancybox({`仅当窗口大小足够大时才应执行。否则不应执行。然后，您需要设置在resize函数中检查的任何变量的值，否则它将不会用窗口的实际大小更新。fancybox在此实例化。在resize函数中，我需要实例化或销毁该实例运行时执行ce。我不知道这是否是解决方案。我只想在未达到最小设备宽度时禁止fancybox执行。注意：对于非jQuery版本，jQuery具有

.resize

方法-。+1。但这是

object.attachEvent（“onresize”，处理程序）

我认为会更好。编辑：啊，FF，

object.addEventListener（“resize”，handler，useCapture）；

这里不必使用jQuery方法。它也适用于普通javascript。