JavaScript监听DOM元素大小变化

吹口琴的喵

于 2021-08-11 14:37:01 发布

阅读量3.9k

点赞数 2

分类专栏： javascript # vue css 文章标签： js dom操作

本文链接：https://blog.youkuaiyun.com/qq_36404808/article/details/119606269

版权

vue 同时被 3 个专栏收录

12 篇文章

订阅专栏

javascript

11 篇文章

订阅专栏

css

5 篇文章

订阅专栏

本文介绍了如何利用iframe的resize事件来监听除window之外的DOM元素大小变化。通过动态创建iframe并将其宽高设置为与目标容器相同，当容器尺寸改变时，iframe的resize事件将被触发，以此实现DOM元素尺寸变化的监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)