div元素监听resize的方法

Posted 2023-04-10

参考技术A 公司有个新需求，要给ios那边传送文章的高度，好让ios完成一个复杂布局。
我这边的内容是后台富文本编辑好的html文件，包括了图片视频文字等内容，所以全部加载完成前高度是一直发生变化的。
一开始做的时候没想得太仔细，html内容加载后我就读取高度了，这就导致一些图片还没加载完全时，整个内容高度就读取了，造成高度过小，后台换了个思路想遍历所有图片和视频的内容，用onLoad钩子监听这些元素是否加载完成，但发现没作用，这种监听法法只适应在比如img标签还没加载进去时就绑定监听事件的，整个html插入后就无法再使用。
最后，百度了一番，看到牛人的杰作，只需创建一个宽高暂满而且不可视的iframe便签，然后监听iframe里面window的resize事件就好了。真是方便啊。
参考文章

vue项目里实时监听某个div宽度的变化，然后执行相应的事件

directives: {  // 使用局部注册指令的方式
    resize: { // 指令的名称
      bind (el, binding) { // el为绑定的元素，binding为绑定给指令的对象
        let width = '', height = '';
        function isReize () {
          const style = document.defaultView.getComputedStyle(el);
          if (width !== style.width || height !== style.height) {
            binding.value();  // 关键
          }
          width = style.width;
          height = style.height;
        }
        el.__vueSetInterval__ = setInterval(isReize, 300);
      },
      unbind (el) {
        clearInterval(el.__vueSetInterval__);
      }
    }
  },

methods：{
	   // 元素发生变化后执行
    resize () {
      console.log('我变了')
    },
}

template

  <div class="shichang borderColor"
                   v-resize="resize"
                   style="clear:both;margin-top:16px;">
	要监控的区域
</div>