您现在的位置是：网站首页>列表内容
通过iframe监听一个DOM元素大小变化CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局，左侧固定宽，右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
2023-10-18 16:06:31
128人已围观
简介 开发过程中经常遇到的一个问题就是如何监听一个 div 的size变化。今天小编通过本文给大家介绍通过iframe元素来实现监听。本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧
开发过程中经常遇到的一个问题就是如何监听一个 div 的size变化。比如我用canvas绘制了一个chart，当canvas的size发生变化的时候，需要重新绘制里面的内容，这个时候就需要监听resize事件做处理。window上虽然有resize事件监听，但这并不能满足我们的需求，因为很多时候，div的size发生了变化，实际 window.resize 事件并未触发。
对于div的resize事件的监听，实现方式有很多，比如定时器检查，通过scroll事件等等，本文主要介绍通过iframe元素来实现监听。
不过我们可以间接利用window的resize事件监听来实现对于某个div的resize事件监听，请看下面具体实现。
2. 实现原理
- 动态创建 iframe 标签，追加到容器中，宽高继承容器100%；
- 获取 iframe 中的window，通过 contentWindow 属性就能获取到；
- 由于 iframe 的宽高继承与父节点，当父容器宽度发生变化，自然会触发iframe中的 resize 事件；
通过iframeWindow.resize事件来监听DOM大小变化，从而达到resize事件的一个监听；
例子
document.querySelector("#ifarme_id").contentWindow.addEventListener('resize', () => {
console.log('size Change！');
}, false)
3.调用
DIV宽高监听
钟南山：非洲如果预防得好，天热时疫情会下降
另外，会上有外籍人士提问：假如你现在去非洲，首先要做的是什么？
钟南山表示：现在要做的是防护，防止蔓延是最重要的。
在非洲，这段时间如果预防得好，也可能到天热时，疫情发展情况会下降。
完整代码
DIV宽高监听 钟南山：非洲如果预防得好，天热时疫情会下降 另外，会上有外籍人士提问：假如你现在去非洲，首先要做的是什么？ 钟南山表示：现在要做的是防护，防止蔓延是最重要的。 在非洲，这段时间如果预防得好，也可能到天热时，疫情发展情况会下降。
更多功能正在更新中...
到此这篇关于通过iframe监听一个DOM元素大小变化的文章就介绍到这了,更多相关DOM元素变化内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
