JavaScript 는 DOM 요소 의 크기 변 화 를 감청 합 니 다.

1.필요 한 필드
개발 과정 에서 자주 발생 하 는 문 제 는 div 의 size 변 화 를 어떻게 감청 하 느 냐 하 는 것 이다.
예 를 들 어 저 는 canvas 로 chart 를 그 렸 습 니 다.canvas 의 size 가 바 뀌 었 을 때 안의 내용 을 다시 그 려 야 합 니 다.이 럴 때 resize 사건 을 감청 하여 처리 해 야 합 니 다.window 에 resize 사건 감청 이 있 지만 우리 의 수 요 를 만족 시 킬 수 없습니다.div 의 size 가 변 했 기 때문에 실제 window.resize 사건 은 촉발 되 지 않 았 습 니 다.
div 의 resize 사건 에 대한 감청 은 실현 방식 이 매우 많다.예 를 들 어 타이머 검사,scroll 사건 등 을 통 해 본 고 는 주로iframe요 소 를 통 해 감청 을 실현 하 는 것 을 소개 한다.
그러나 우 리 는 window 의 resize 사건 감청 을 간접 적 으로 이용 하여 특정한 div 의 resize 사건 감청 을 실현 할 수 있 습 니 다.아래 의 구체 적 인 실현 을 보십시오.
2.실현 원리
  • 동적 으로 iframe 라벨 을 만 들 고 용기 에 추가 하 며 너비 와 높이 의 계승 용기 100%;
  • iframe 의 window 를 가 져 오고 contentWindow 속성 을 통 해 얻 을 수 있 습 니 다.
  • iframe 의 넓 은 계승 과 부모 노드 로 인해 부모 용기 의 너비 가 변화 하면 iframe 의 resize 사건 이 발생 합 니 다.
  • iframe Window.resize 사건 을 통 해 DOM 크기 변 화 를 감청 하여 resize 사건 의 감청 에 도달 합 니 다.
    예시
    
    document.querySelector("#ifarme_id").contentWindow.addEventListener('resize', () => {
      console.log('size Change!');
    }, false)
    
    3.호출
    
    <!DOCTYPE html>
    <html>
      <head>
     <meta charset="utf-8">
     <title>DIV    </title>
      <style type="text/css">
        #content {
        overflow: auto;
      }
     </style>
     </head>
     <body>
     <div id="content">
             :        ,        
           ,         :        ,        ?
              :        ,         。
            ,          ,       ,         。
     </div>
    
     <button id="change-size">    </button>
    
     <script type="text/javascript">
      var eleResize = new ElementResize('#content');
      eleResize.listen(function() {
      console.log('size change!')
      })
    
      //    
      document.querySelector('#change-size').addEventListener('click', function() {
      let cont = document.querySelector('#content');
      cont.style.width = Math.floor((Math.random() * (document.documentElement.clientWidth - 500)) + 500) + 'px';
      cont.style.height = Math.floor(Math.random() * 300) + 'px';
      }, false)
     </script>
     </body>
    </html>
    전체 코드
    
    <!DOCTYPE html>
    <html>
     <head>
     <meta charset="utf-8">
     <title>DIV    </title>
     <style type="text/css">
      #content {
      overflow: auto;
      }
     </style>
     </head>
     <body>
     <div id="content">
         :        ,        
    
        ,         :        ,        ?
    
           :        ,         。
    
         ,          ,       ,         。
     </div>
     <button id="change-size">    </button>
    
     <script type="text/javascript">
      (function() {
      let self = this;
      /**
       *       
       * @param {Object} el        
       */
      function ElementResize(eleSelector) {
       if (!(this instanceof ElementResize)) return;
       if (!eleSelector) return;
       this.eleSelector = eleSelector;
       this.el = document.querySelector(eleSelector);
       this.queue = [];
       this.__init(); //globel init
      }
    
      //   
      ElementResize.prototype.__init = function() {
       let iframe = this.crateIElement();
       this.el.style.position = 'relative';
       this.el.appendChild(iframe)
       this.bindEvent(iframe.contentWindow);
      }
    
      /**
       *       
       * @param {HTMLObject} el
       * @param {Object} styleJson
       */
      ElementResize.prototype.setStyle = function(el, styleJson) {
       if (!el) return;
       styleJson = styleJson || {
       opacity: 0,
       'z-index': '-1111',
       position: 'absolute',
       left: 0,
       top: 0,
       width: '100%',
       height: '100%',
       };
       let styleText = '';
       for (key in styleJson) {
       styleText += (key + ':' + styleJson[key] + ';');
       }
       el.style.cssText = styleText;
      }
    
      /**
       *     
       * @param {Object} style
       */
      ElementResize.prototype.crateIElement = function(style) {
       let iframe = document.createElement('iframe');
       this.setStyle(iframe);
       return iframe;
      }
    
      /**
       *     
       * @param {Object} el
       */
      ElementResize.prototype.bindEvent = function(el) {
       if (!el) return;
       var _self = this;
       el.addEventListener('resize', function() {
       _self.runQueue();
       }, false)
      }
    
      /**
       *     
       */
      ElementResize.prototype.runQueue = function() {
       let queue = this.queue;
       for (var i = 0; i < queue.length; i++) {
       (typeof queue[i]) === 'function' && queue[i].apply(this);
       }
      }
    
      /**
       *     
       * @param {Object} cb     
       */
      ElementResize.prototype.listen = function(cb) {
       if (typeof cb !== 'function') throw new TypeError('cb is not a function!');
       this.queue.push(cb);
      }
    
      self.ElementResize = ElementResize;
      })()
      
      //        
      var eleResize = new ElementResize('#content');
      eleResize.listen(function() {
      console.log('  listener')
      })
    
      //    
      document.querySelector('#change-size').addEventListener('click', function() {
      let cont = document.querySelector('#content');
      cont.style.width = Math.floor((Math.random() * (document.documentElement.clientWidth - 500)) + 500) + 'px';
      cont.style.height = Math.floor(Math.random() * 300) + 'px';
      }, false)
     </script>
     </body>
    </html>
    자 바스 크 립 트 가 DOM 요소 의 크기 변 화 를 감청 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 자 바스 크 립 트 감청 DOM 요소 의 크기 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!

    좋은 웹페이지 즐겨찾기