-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
        }); 
    });
}

ただし、幅は一度だけチェックされます。その理由は、クエリが外側にあるため、ページの読み込み時にのみチェックされていると思うからです。コードを再構築するにはどうすればよいですか?

編集：

fancyboxid を持つ要素でインスタンス化されますfancylink。この場合、特定の URL を持つアンカー要素です。この URL は、誰かがリンクをクリックすると、fancybox で iFrame として開かれます。私の目標は、特定の幅に達しない場合はファンシーボックスを開かないようにすることです。代わりに、通常のリンクとして機能し、新しいタブで開く必要があります。幅が 640px を超える場合のみ、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 に答える