监听div元素高度变化的方案

Vue代码展示

<div class="box" style="position: relative">
   <iframe
     ref="iframeRefAll"
     style="
       position: absolute;
       top: 0;
       width: 0;
       z-index: -1;
       height: 100%;
     "
   >iframe>
   
   ...
 div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

mounted() {
    // 绑定监听事件
	this.initListener();
}，
methods: {
	initListener() {
      const _this = this;
      const ifr = this.$refs.iframeRefAll;
      if (!ifr) return;
      ifr.contentWindow.onresize = () => {
        // ... 代表在div.box高度发生变化时，需要做的程序处理
        ...
      };
    },
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

问题

需要监听 div.box 元素的高度变化，在该元素高度发生改变时做一些程序处理。

问题是：在浏览器渲染img标签时src如果为一个url地址，浏览器为避免阻塞其他元素的渲染，请求该地址的过程是异步的，这导致**“需要渲染的内容”**在DOM被挂载后也会存在高度的变化【img请求完成后，获得高度，撑高div.box元素】

原理：

1. iframe 设置了高度100%
2. div.box 元素高度发生改变时，iframe 高度会随之改变
3. iframe高度的改变意味iframe的窗口调整事件被触发
4. 由此，监听iframe的onresize窗口调整事件变相达到监听div.box元素高度变化的目的

属性详解

position: absolute;：定位元素脱离文档流，使外层包裹元素div.box的高度仅由 “需要渲染的内容” 决定
width: 0;：隐藏iframe元素的方式
z-index: -1;：使iframe被 “需要渲染的内容” 的遮盖，无法点击