Acara pengubahan ukuran jendela lintas browser - JavaScript / jQuery

Apa metode (modern) yang benar untuk memanfaatkan peristiwa mengubah ukuran jendela yang berfungsi di Firefox, WebKit , dan Internet Explorer?

Dan bisakah Anda menghidupkan / mematikan kedua scrollbar?

jQuery memiliki metode bawaan untuk ini:

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

Demi responsif UI, Anda dapat mempertimbangkan menggunakan setTimeout untuk memanggil kode Anda hanya setelah beberapa milidetik, seperti yang ditunjukkan dalam contoh berikut, terinspirasi oleh ini :

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

});

Berikut ini cara non-jQuery dalam memanfaatkan acara pengubahan ukuran:

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

Ini bekerja di semua browser modern. Itu tidak mencekik apa pun untuk Anda. Ini adalah contoh dari tindakan itu.

Maaf untuk membuka utas lama, tetapi jika seseorang tidak ingin menggunakan jQuery Anda dapat menggunakan ini:

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

Karena Anda terbuka untuk jQuery, plugin ini tampaknya melakukan triknya.

Menggunakan jQuery 1.9.1 Saya baru tahu bahwa, meskipun secara teknis identik) *, ini tidak berfungsi di IE10 (tetapi di Firefox):

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

sementara ini berfungsi di kedua browser:

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

Sunting :)
* Sebenarnya tidak identik secara teknis, seperti dicatat dan dijelaskan dalam komentar oleh WraithKenny dan Henry Blyth .

jQuerymenyediakan $(window).resize()fungsi secara default:

<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> 

Saya menganggap plugin jQuery "jQuery resize event" menjadi solusi terbaik untuk ini karena ini menangani pelambatan acara sehingga berfungsi sama di semua browser. Ini mirip dengan jawaban Andrews tetapi lebih baik karena Anda dapat mengaitkan acara pengubahan ukuran ke elemen / penyeleksi tertentu serta seluruh jendela. Ini membuka kemungkinan baru untuk menulis kode bersih.

Plugin ini tersedia di sini

Ada masalah kinerja jika Anda menambah banyak pendengar, tetapi untuk sebagian besar kasus penggunaan itu sempurna.

Saya pikir Anda harus menambahkan kontrol lebih lanjut untuk ini:

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

berharap ini akan membantu di jQuery

tentukan suatu fungsi terlebih dahulu, jika ada fungsi yang ada lompati ke langkah berikutnya.

 function someFun() {
 //use your code
 }

ukuran browser gunakan seperti ini.

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

Selain fungsi mengubah ukuran jendela yang disebutkan, penting untuk dipahami bahwa acara pengubahan ukuran sering diaktifkan jika digunakan tanpa merusak acara.

Paul Irish memiliki fungsi yang sangat baik yang banyak mengubah ukuran panggilan. Sangat disarankan untuk digunakan. Bekerja lintas-browser. Mengujinya di IE8 tempo hari dan semuanya baik-baik saja.

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

Pastikan untuk memeriksa demo untuk melihat perbedaannya.

Inilah fungsi untuk kelengkapan.

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