公司有個新需求，要給ios那邊傳送文章的高度，好讓ios完成一個復(fù)雜布局。
我這邊的內(nèi)容是后臺富文本編輯好的html文件，包括了圖片視頻文字等內(nèi)容，所以全部加載完成前高度是一直發(fā)生變化的。
一開始做的時候沒想得太仔細(xì)，html內(nèi)容加載后我就讀取高度了，這就導(dǎo)致一些圖片還沒加載完全時，整個內(nèi)容高度就讀取了，造成高度過小，后臺換了個思路想遍歷所有圖片和視頻的內(nèi)容，用onLoad鉤子監(jiān)聽這些元素是否加載完成，但發(fā)現(xiàn)沒作用，這種監(jiān)聽法法只適應(yīng)在比如img標(biāo)簽還沒加載進(jìn)去時就綁定監(jiān)聽事件的，整個html插入后就無法再使用。
最后，百度了一番，看到牛人的杰作，只需創(chuàng)建一個寬高暫滿而且不可視的iframe便簽，然后監(jiān)聽iframe里面window的resize事件就好了。真是方便啊。
參考文章

<div class="container" id="mapDiv" >
    hello
</div>

function resize (el, cb) {
      // 創(chuàng)建iframe標(biāo)簽，設(shè)置樣式并插入到被監(jiān)聽元素中
      var iframe = document.createElement('iframe');
      iframe.setAttribute('class', 'size-watch');
      el.appendChild(iframe);

      // 記錄元素當(dāng)前寬高
      var oldWidth = el.offsetWidth;
      var oldHeight = el.offsetHeight;

      // iframe 大小變化時的回調(diào)函數(shù)
     function sizeChange () {
         // 記錄元素變化后的寬高
         var width = el.offsetWidth;
         var height = el.offsetHeight;
         // 不一致時觸發(fā)回調(diào)函數(shù) cb，并更新元素當(dāng)前寬高
         if (width !== oldWidth || height !== oldHeight) {
             cb({width: width, height: height}, {width: oldWidth, height: oldHeight});
             oldWidth = width;
             oldHeight = height;
          }
      }

      // 設(shè)置定時器用于節(jié)流
      var timer = 0;
      // 將 sizeChange 函數(shù)掛載到 iframe 的resize回調(diào)中
     iframe.contentWindow.onresize = function () {
        clearTimeout(timer);
        timer = setTimeout(sizeChange, 20);
    };
  }
  //var el = document.getElementById("mapDiv");
  var el = document.querySelector('.container');
  resize(el, (val, oldVal) => {
     console.log(`size changed！new: ${JSON.stringify(val)}, old: ${JSON.stringify(oldVal)}`);
  });