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

크로스 브라우저 창 크기 조정 이벤트 - 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와 Henry Blys의 코멘트에서 설명한 바와 같이 기술적으로 동일하지 않습니다.

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

언급URL : https://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery