[JQUERY] 크로스 브라우저 창 크기 조정 이벤트 - 자바 스크립트 / jQuery를

크로스 브라우저 창 크기 조정 이벤트 - 자바 스크립트 / jQuery를

해결법

1. ---

   1.jQuery를이 내장 된 방법이를 위해 :

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

2. ---

   2.

   $(window).bind('resize', function () { 
   
       alert('resize');
   
   });
   

3. ---

   3.여기 resize 이벤트에 도청의 비의 jQuery 방법입니다 :

   여기 resize 이벤트에 도청의 비의 jQuery 방법입니다 :

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

   그것은 모든 최신 브라우저에서 작동합니다. 그것은 당신을 위해 아무것도 스로틀하지 않습니다. 다음 동작에서의 일례이다.

4. ---

   4.죄송합니다 오래된 스레드를 가지고,하지만 누군가가 jQuery를 사용하지 않는 경우에 당신은이를 사용할 수 있습니다 :

   죄송합니다 오래된 스레드를 가지고,하지만 누군가가 jQuery를 사용하지 않는 경우에 당신은이를 사용할 수 있습니다 :

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

5. ---

   5.당신이 jQuery를 오픈하기 때문에,이 플러그인 트릭을 할 것으로 보인다.

   당신이 jQuery를 오픈하기 때문에,이 플러그인 트릭을 할 것으로 보인다.

6. ---

   6.*이) IE10에서 작업 (하지만 Firefox에서하지 않았다) 기술적으로 동일하지만 난 그냥, 그것을 발견 jQuery를 1.9.1을 사용 :

   *이) IE10에서 작업 (하지만 Firefox에서하지 않았다) 기술적으로 동일하지만 난 그냥, 그것을 발견 jQuery를 1.9.1을 사용 :

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

   이 두 브라우저에서 근무하는 동안 :

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

   편집하다: ) * 실제로 기술적으로 동일하지는으로 명시하고 WraithKenny 헨리 블라이스 의한 코멘트 설명.

7. ---

   7.jQuery를 기본적으로 $ (창) .resize () 함수를 제공합니다 :

   jQuery를 기본적으로 $ (창) .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> 
   

8. ---

   8.나는 그것이 모든 브라우저에서 동일하게 작동하도록 이벤트를 조절을 담당으로 jQuery를 플러그인 "jQuery를 크기 조정 이벤트"이를위한 최적의 솔루션이 될 생각. 특정 요소 / 선택기뿐만 아니라 전체 창 크기 조정 이벤트를 연결할 수 있기 때문에 그것은 앤드류스 응답과 유사하지만 더 낫다. 그것은 깨끗한 코드를 작성하는 새로운 가능성을 엽니 다.

   나는 그것이 모든 브라우저에서 동일하게 작동하도록 이벤트를 조절을 담당으로 jQuery를 플러그인 "jQuery를 크기 조정 이벤트"이를위한 최적의 솔루션이 될 생각. 특정 요소 / 선택기뿐만 아니라 전체 창 크기 조정 이벤트를 연결할 수 있기 때문에 그것은 앤드류스 응답과 유사하지만 더 낫다. 그것은 깨끗한 코드를 작성하는 새로운 가능성을 엽니 다.

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

   거기 당신은 청취자를 많이 추가하면 성능 문제가 있지만, 대부분의 사용 경우를 위해 완벽.

9. ---

   9.난 당신이에 더 컨트롤을 추가해야한다고 생각 :

   난 당신이에 더 컨트롤을 추가해야한다고 생각 :

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

10. ---

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

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

    다음 단계로 기존 스킵 기능이있는 경우, 우선 함수를 정의한다.

     function someFun() {
     //use your code
     }
    

    이와 같은 브라우저 크기 조절 사용.

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

11. ---

    11.창 외에 크기 조정 기능은이 사건을 deboucing없이 사용하는 경우 크기 조정 이벤트가 많이 발생 것을 이해하는 것이 중요하다 언급했다.

    창 외에 크기 조정 기능은이 사건을 deboucing없이 사용하는 경우 크기 조정 이벤트가 많이 발생 것을 이해하는 것이 중요하다 언급했다.

    폴 아일랜드 인 크기 조정 호출 좋은 거래를 디 바운스 우수한 기능을 가지고 있습니다. 아주 사용하는 것이 좋습니다. 크로스 브라우저를 작동합니다. 다른 일 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...
    });
    

from https://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery by cc-by-sa and MIT license