JavaScript监听DOM元素大小变化

window

如果是window的话，可以监听window.resize事件

普通dom元素

可以通过定时器检查来实现，本文介绍另外一种方案，使用iframe，借助iframe中的resize 事件来监听dom元素的大小变化。

• 动态创建 iframe 标签，追加到容器中，宽高继承容器100%；
• 获取 iframe 中的window，通过 contentWindow 属性就能获取到；
• 由于 iframe 的宽高继承与父节点，当父容器宽度发生变化，自然会触发iframe中的resize 事件；
• 通过 iframeWindow.resize 事件来监听DOM大小变化，从而达到resize事件的一个监听。

<iframe ref="resizeFrame" class="resizeFrame" frameborder="0" ></iframe>

.resizeFrame {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

this.$refs.resizeFrame.contentWindow.addEventListener('resize', () => {
      this.appMainHeight = $('.app-main').css('height')
      this.appMainWidth = $('.app-main').css('width')
      // 或者其他的业务逻辑
}, false)