div元素监听resize的方法

公司有个新需求，要给ios那边传送文章的高度，好让ios完成一个复杂布局。
我这边的内容是后台富文本编辑好的html文件，包括了图片视频文字等内容，所以全部加载完成前高度是一直发生变化的。
一开始做的时候没想得太仔细，html内容加载后我就读取高度了，这就导致一些图片还没加载完全时，整个内容高度就读取了，造成高度过小，后台换了个思路想遍历所有图片和视频的内容，用onLoad钩子监听这些元素是否加载完成，但发现没作用，这种监听法法只适应在比如img标签还没加载进去时就绑定监听事件的，整个html插入后就无法再使用。
最后，百度了一番，看到牛人的杰作，只需创建一个宽高暂满而且不可视的iframe便签，然后监听iframe里面window的resize事件就好了。真是方便啊。
参考文章

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

function resize (el, cb) {
      // 创建iframe标签，设置样式并插入到被监听元素中
      var iframe = document.createElement('iframe');
      iframe.setAttribute('class', 'size-watch');
      el.appendChild(iframe);

      // 记录元素当前宽高
      var oldWidth = el.offsetWidth;
      var oldHeight = el.offsetHeight;

      // iframe 大小变化时的回调函数
     function sizeChange () {
         // 记录元素变化后的宽高
         var width = el.offsetWidth;
         var height = el.offsetHeight;
         // 不一致时触发回调函数 cb，并更新元素当前宽高
         if (width !== oldWidth || height !== oldHeight) {
             cb({width: width, height: height}, {width: oldWidth, height: oldHeight});
             oldWidth = width;
             oldHeight = height;
          }
      }

      // 设置定时器用于节流
      var timer = 0;
      // 将 sizeChange 函数挂载到 iframe 的resize回调中
     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)}`);
  });