简单来说，监控div的resize
时间：2023-04-05 02:03:36
HTML5
就是：给监控的div添加一个iframe标签，并设置它的高和宽为100%；当iframe的resize被触发时，说明div的大小在变化！参考stackoverflow的回答过程中的Resizeondivelement在日常开发中，当一个元素的宽高发生变化时，需要广播一个事件。由于此时窗口大小没有变化，所以添加resize回调是没有用的；而这个元素是由于某些dom隐藏了，导致它的高宽适配，不是通过js设置的，所以MutationObserver是监测不到的。在网上搜了一下，有很多方法可以监听div的resize事件。例如，一个基于jquery的插件监控滚动对象元素以监控元素调整大小。虽然基于requestAnimationFrame的周期检查实现了元素Listening的宽高，但是看起来很吃瓜。直到看到stackoverflow的答案...代码就是我们要监控的元素和样式
模拟resize函数，参数el为监听元素，cb为回调函数functionriseze(el,cb){//创建iframe标签，设置样式并插入到被监控元素中variframe=document.createElement('iframe');iframe.setAttribute('class','size-watch');el.appendChild(iframe);//记录元素当前的宽高varoldWidth=el.offsetWidth;varoldHeight=el.offsetHeight;//iframe大小改变时的回调函数functionsizeChange(){//记录元素改变后的宽高varwidth=el.offsetWidth;varheight=el.offsetHeight;//不一致时触发回调函数cb，更新元素当前宽高if(width!==oldWidth||height!==oldHeight){cb({width:width,height:height},{宽度：旧宽度，高度：旧高度}）；旧宽度=宽度；旧高度=高度；}}//设置节流定时器vartimer=0;//将sizeChange函数挂载到iframe的调整大小回调iframe.contentWindow.onresize=function(){clearTimeout(timer);计时器=setTimeout(sizeChange,20);};}这是iframe.size-watch{width:100%;的样式高度：100%；位置：绝对；可见性：隐藏；保证金：0；填充：0；border:0;}试一试...结果就是这样溜溜球~
