通过iframe监听一个DOM元素大小变化实现代码

本篇文章小编给大家分享一下通过iframe监听一个DOM元素大小变化实现代码，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

对于div的resize事件的监听，实现方式有很多，比如定时器检查，通过scroll事件等等，本文主要介绍通过iframe元素来实现监听。

不过我们可以间接利用window的resize事件监听来实现对于某个div的resize事件监听，请看下面具体实现。

2. 实现原理

动态创建 iframe 标签，追加到容器中，宽高继承容器100%；

获取 iframe 中的window，通过 contentWindow 属性就能获取到；

由于 iframe 的宽高继承与父节点，当父容器宽度发生变化，自然会触发iframe中的 resize 事件；

通过iframeWindow.resize事件来监听DOM大小变化，从而达到resize事件的一个监听；

例子

css;">document.querySelector("#ifarme_id").contentWindow.addEventListener('resize', () => {
    console.log('size Change！');
}, false)

3.调用

    
	
	DIV宽高监听
    
	
	
	

完整代码

	
		
		DIV宽高监听