js监听Dom元素变化_js监听元素距离顶部位置变化

当echarts图表要跟随父元素宽高而变化时,我们需要对他的父级元素进行监听,但是resize只能对windows窗口进行监听,对普通dom元素进行监听是不行的.

1.轮循(不优雅)

2.MutationObserver、ResizeObserver 有兼容性问题

3.使用iframe模拟window的resize

创建一个隐藏的iframe 让他与父元素的宽高相等 添加到父元素里 这样父元素宽高改变的时候 iframe也会跟着改变 然后我们监听contentWindow就可以了(注意:父元素得position:relative定位)

observe(dom,handler) {
	// 创建一个iframe
	let frame = document.createElement('iframe')
	// 添加样式 脱离文档流 与父元素宽高相等
	const css =
        "position:absolute;left:0;top:-100%;width:100%;height:100%;visibility:hidden;pointer-events:none;";
      frame.style.cssText = css;
      // frame加载成功后监听resize事件
      frame.onload = () => {
        frame.contentWindow.addEventListener('resize',() => {
          handler(dom);
        })
      };
      // 把frame添加到父元素里
      dom.appendChild(frame);
      return frame;
}

// 调用
let parent = this.$refs.parent.$el;
 this.observe(parent, () => {
     this.myChart.resize();
 });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23