크로스 브라우저 창 크기 조정 이벤트-JavaScript / jQuery

Firefox, WebKit 및 Internet Explorer 에서 작동하는 창 크기 조정 이벤트를 사용하는 올바른 (현대) 방법은 무엇입니까 ?

두 스크롤바를 모두 켜거나 끌 수 있습니까?

jQuery에는이를위한 내장 메소드 가 있습니다.

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

UI의 응답 성을 위해, 당신은 영감, 다음 예에서와 같이, 단지 밀리 초 몇 개의 후 코드를 호출 할에서는 setTimeout을 사용하는 것이 좋습니다 이 :

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

});

크기 조정 이벤트를 활용하는 비 jQuery 방법은 다음과 같습니다.

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

모든 최신 브라우저에서 작동합니다. 그것은 당신을 위해 아무것도 스로틀 하지 않습니다 . 다음은 실제로 사용 되는 예 입니다.

오래된 스레드를 가져 와서 죄송하지만 누군가 jQuery를 사용하지 않으려면 다음을 사용할 수 있습니다.

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

jQuery에 공개되어 있으므로이 플러그인이 트릭을 수행하는 것 같습니다.

jQuery 1.9.1을 사용하면 기술적으로 동일하지만 IE10에서는 작동하지 않지만 Firefox에서는 작동하지 않습니다.

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

이것은 두 브라우저에서 모두 작동했습니다.

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

편집 :
) * 실제로 하지 , 기술적으로 동일한 같은 지적과로 의견을 설명 WraithKenny 와 헨리 블라이스 .

jQuery$(window).resize()기본적으로 기능을 제공 합니다.

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

jQuery 플러그인 "jQuery resize event"는 이벤트를 조절하여 모든 브라우저에서 동일하게 작동하도록하기 때문에이를위한 최상의 솔루션이라고 생각합니다. Andrews 답변과 비슷하지만 크기 조정 이벤트를 특정 요소 / 선택기 및 전체 창에 연결할 수 있기 때문에 더 좋습니다. 깨끗한 코드를 작성할 수있는 새로운 가능성을 열어줍니다.

플러그인은 여기에서 사용할 수 있습니다

많은 리스너를 추가하면 성능 문제가 있지만 대부분의 경우에는 완벽합니다.

나는 이것에 더 많은 제어를 추가해야한다고 생각합니다.

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

그것이 jQuery에 도움이되기를 바랍니다.

기존 함수가있는 경우 먼저 함수를 정의하고 다음 단계로 건너 뜁니다.

 function someFun() {
 //use your code
 }

브라우저 크기 조정은 이와 같이 사용합니다.

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

언급 된 창 크기 조정 기능 외에도 이벤트 크기를 변경하지 않고 사용하면 크기 조정 이벤트가 많이 발생한다는 것을 이해하는 것이 중요합니다.

Paul Irish는 크기 조정 호출에 많은 영향을 미칩니다. 사용하는 것이 좋습니다. 크로스 브라우저 작동합니다. 다른 날 IE8에서 테스트했으며 모두 괜찮 았습니다.

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

차이점 을 확인하려면 데모 를 확인하십시오.

완전 함을위한 기능은 다음과 같습니다.

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