Tarayıcılar arası pencere yeniden boyutlandırma etkinliği - JavaScript / jQuery

Firefox, WebKit ve Internet Explorer'da çalışan pencere yeniden boyutlandırma olayına dokunmanın doğru (modern) yöntemi nedir?

Ve her iki kaydırma çubuğunu da açabilir / kapatabilir misiniz?

jQuery bunun için yerleşik bir yönteme sahiptir :

$(window).resize(function () { /* do something */ });

UI yanıt verme uğruna, sen esinlenerek, aşağıdaki örnekte gösterildiği gibi, sadece milisaniye bazı sayısının ardından kodunuzu aramak için bir setTimeout kullanmayı düşünebilirsiniz bu :

function doSomething() {
    alert("I'm done resizing for the moment");
};

var resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
});

$(window).bind('resize', function () { 

    alert('resize');

});

Yeniden boyutlandırma olayına dokunmanın jQuery olmayan yolu:

window.addEventListener('resize', function(event){
  // do stuff here
});

Tüm modern tarayıcılarda çalışır. It does not sizin için bir şey kelebeği. İşte bunun bir örneği .

Eski bir ileti dizisi getirdiğim için üzgünüm, ancak birisi jQuery kullanmak istemiyorsa bunu kullanabilirsiniz:

function foo(){....};
window.onresize=foo;

JQuery'ye açık olduğunuz için, bu eklenti hile yapıyor gibi görünüyor.

JQuery 1.9.1 kullanarak sadece teknik olarak aynı olmasına rağmen * buldum, bu IE10 (ama Firefox) işe yaramadı:

// did not work in IE10
$(function() {
    $(window).resize(CmsContent.adjustSize);
});

bu her iki tarayıcıda da çalışırken:

// did work in IE10
$(function() {
    $(window).bind('resize', function() {
        CmsContent.adjustSize();
    };
});

Düzenleme:
) * Aslında değil , teknik olarak özdeş olarak belirtildiği ve yorumlarına açıklandığı WraithKenny ve Henry Blyth .

jQuery$(window).resize()varsayılan olarak işlev sağlar :

<script type="text/javascript">
// function for resize of div/span elements
var $window = $( window ),
    $rightPanelData = $( '.rightPanelData' )
    $leftPanelData = $( '.leftPanelData' );

//jQuery window resize call/event
$window.resize(function resizeScreen() {
    // console.log('window is resizing');

    // here I am resizing my div class height
    $rightPanelData.css( 'height', $window.height() - 166 );
    $leftPanelData.css ( 'height', $window.height() - 236 );
});
</script> 

Ben jQuery eklentisi "jQuery resize olayı" tüm tarayıcılar aynı çalışır böylece olay daraltma ilgilenir gibi bunun için en iyi çözüm olarak düşünün. Andrews cevabına benzer, ancak yeniden boyutlandırma olayını belirli öğelere / seçicilere ve tüm pencereye bağlayabildiğiniz için daha iyidir. Temiz kod yazmak için yeni olanaklar açar.

Eklenti burada mevcuttur

Çok fazla dinleyici eklerseniz performans sorunları vardır, ancak çoğu kullanım durumunda mükemmeldir.

Buna daha fazla kontrol eklemeniz gerektiğini düşünüyorum:

    var disableRes = false;
    var refreshWindow = function() {
        disableRes = false;
        location.reload();
    }
    var resizeTimer;
    if (disableRes == false) {
        jQuery(window).resize(function() {
            disableRes = true;
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(refreshWindow, 1000);
        });
    }

umarım jQuery'de yardımcı olacaktır

önce bir işlev tanımlayın, mevcut bir işlev varsa sonraki adıma geçin.

 function someFun() {
 //use your code
 }

tarayıcı yeniden boyutlandırma bu gibi kullanın.

 $(window).on('resize', function () {
    someFun();  //call your function.
 });

Bahsedilen pencere yeniden boyutlandırma işlevlerinin yanı sıra, yeniden boyutlandırma olaylarının, olayları açığa çıkarmadan kullanıldığında çok fazla tetiklendiğini anlamak önemlidir.

Paul Irish, yeniden boyutlandırma çağrılarını büyük ölçüde azaltan mükemmel bir işleve sahiptir. Kullanımı çok önerilir. Çapraz tarayıcı çalışır. Geçen gün IE8 test ve hepsi iyiydi.

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

Farkı görmek için demoyu kontrol ettiğinizden emin olun .

İşte tamlık işlevi.

(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(){
  // code that takes it easy...
});