크로스 브라우저 창 크기 조정 이벤트-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 와 헨리 블라이스 .

---

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