js监听容器高度变化最近做了一个嵌入到原生app里面的H5评分组件，高度是随着交互动态的，组件里面有输入框，输入框唤起键

最近做了一个嵌入到原生app里面的H5评分组件，高度是随着交互动态的，组件里面有输入框，输入框唤起键盘时会遮挡输入框，ios端适配起来有点问题，所以要H5高度变化的时候主动告诉ios当前的高度。然后就有请我们今天的主角 new ResizeObserve

废话不多说直接上代码

<script setup>
 // 1. 定义 ref 关联 DOM 元素 绑定到要监听的dom元素
  const targetRef = ref(null);
 // 2. 定义 ResizeObserver 实例（先声明，方便卸载时使用）
 let resizeObserver = null;
     // 定义监听容器高度变化的方法
 const handelSiseChange = () => {
  if (targetRef.value) {
    // 创建观察器实例
    resizeObserver = new ResizeObserver((entries) => {
      console.log("高度发生了变化");
      // entries 是被观察元素的数组（这里只观察一个元素）
      const entry = entries[0];
      // 获取元素高度（contentRect 包含 content + padding 的尺寸）
      currentHeight.value = Math.ceil(entry.contentRect.height);
      console.log("当前的高度", currentHeight.value);
      // 告知原生容器的事实高度
      window.webkit.messageHandlers.sizeChangeHandler.postMessage({ height: currentHeight.value    });
  }
  
 onMounted(()=>{
   //页面加载完 注册监听
   handelSiseChange();
 })
</script>