Sự kiện thay đổi kích thước cửa sổ trình duyệt chéo - JavaScript / jQuery

Phương pháp chính xác (hiện đại) để gõ vào sự kiện thay đổi kích thước cửa sổ hoạt động trong Firefox, WebKit và Internet Explorer là gì?

Và bạn có thể bật / tắt cả hai thanh cuộn không?

jQuery có một phương thức tích hợp sẵn cho việc này:

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

Vì mục đích đáp ứng UI, bạn có thể cân nhắc sử dụng setTimeout để gọi mã của mình chỉ sau một số mili giây, như trong ví dụ sau, lấy cảm hứng từ điều này :

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

});

Đây là cách không phải là jQuery để gõ vào sự kiện thay đổi kích thước:

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

Nó hoạt động trên tất cả các trình duyệt hiện đại. Nó không tiết kiệm bất cứ điều gì cho bạn. Đây là một ví dụ về nó trong hành động.

Xin lỗi để đưa ra một chủ đề cũ, nhưng nếu ai đó không muốn sử dụng jQuery, bạn có thể sử dụng điều này:

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

Vì bạn đang mở jQuery, plugin này dường như thực hiện thủ thuật.

Sử dụng jQuery 1.9.1 Tôi mới phát hiện ra rằng, mặc dù giống hệt về mặt kỹ thuật) *, nhưng điều này không hoạt động trong IE10 (nhưng trong Firefox):

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

trong khi điều này làm việc trong cả hai trình duyệt:

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

Chỉnh sửa
:) * Trên thực tế không giống hệt về mặt kỹ thuật, như đã lưu ý và giải thích trong các nhận xét của WraithKenny và Henry Blyth .

jQuerycung cấp $(window).resize()chức năng theo mặc định:

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

Tôi coi plugin jQuery "Sự kiện thay đổi kích thước jQuery" là giải pháp tốt nhất cho việc này vì nó đảm nhiệm việc điều chỉnh sự kiện để nó hoạt động giống nhau trên tất cả các trình duyệt. Nó tương tự như câu trả lời của Andrew nhưng tốt hơn vì bạn có thể nối sự kiện thay đổi kích thước vào các thành phần / bộ chọn cụ thể cũng như toàn bộ cửa sổ. Nó mở ra những khả năng mới để viết mã sạch.

Các plugin có sẵn ở đây

Có vấn đề về hiệu suất nếu bạn thêm nhiều người nghe, nhưng đối với hầu hết các trường hợp sử dụng thì nó hoàn hảo.

Tôi nghĩ bạn nên thêm quyền kiểm soát này:

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

hy vọng nó sẽ giúp ích cho jQuery

xác định một chức năng trước, nếu có một chức năng hiện có bỏ qua bước tiếp theo.

 function someFun() {
 //use your code
 }

thay đổi kích thước trình duyệt như thế này.

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

Bên cạnh các chức năng thay đổi kích thước cửa sổ được đề cập, điều quan trọng là phải hiểu rằng các sự kiện thay đổi kích thước sẽ kích hoạt rất nhiều nếu được sử dụng mà không làm suy giảm các sự kiện.

Paul Irish có một chức năng tuyệt vời công bố các cuộc gọi thay đổi kích thước rất nhiều. Rất khuyến khích sử dụng. Hoạt động đa trình duyệt. Đã thử nghiệm nó trong IE8 vào một ngày khác và tất cả đều ổn.

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

Hãy chắc chắn kiểm tra bản demo để thấy sự khác biệt.

Đây là chức năng cho sự hoàn chỉnh.

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