一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2020-04-23 编辑:袖梨 来源:一聚教程网

本篇文章小编给大家分享一下通过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宽高监听
		
	
	
		
钟南山:非洲如果预防得好,天热时疫情会下降 另外,会上有外籍人士提问:假如你现在去非洲,首先要做的是什么? 钟南山表示:现在要做的是防护,防止蔓延是最重要的。 在非洲,这段时间如果预防得好,也可能到天热时,疫情发展情况会下降。

热门栏目