监测一个元素是否 Resize （ResizeObserver） 以及与 Resize 事件的比较

ResizeObserver

监测元素的 resize 需要使用 ResizeObserver 类：

1
2
3
4
5
6
7
8

new ResizeObserver((entries) => {
  for (const x of iframe) {
    x.resize()
  }
  for(const entry of entries) {
    abc.size = entry.borderBoxSize
  }
}).observe(root)

其中 ResizeObserver callback 中的参数 entries 指的是这个 observer 正在观察元素的数组。

与 resize 事件的比较

resize event

文档视图（窗口）调整大小时会触发 resize 事件。现在 resize 事件只针对窗口（window）触发。

1

window.onresize = (xxx) => {xxx}

即 resize 事件仅作用在窗口上，观测的是窗口大小的改变。而 ResizeObserver 作用在元素上，观测的是元素大小的改变。