通过iframe监听一个DOM元素大小变化

站长资源 2024/11/21 佚名

2 0 1

开发过程中经常遇到的一个问题就是如何监听一个 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.调用

<!DOCTYPE html>
<html>
    <head>
	<meta charset="utf-8">
	<title>DIV宽高监听</title>
    <style type="text/css">
        #content {
        overflow: auto;
			}
		</style>
	</head>
	<body>
	<div id="content">
            钟南山：非洲如果预防得好，天热时疫情会下降
        	另外，会上有外籍人士提问：假如你现在去非洲，首先要做的是什么？
        	钟南山表示：现在要做的是防护，防止蔓延是最重要的。
        	在非洲，这段时间如果预防得好，也可能到天热时，疫情发展情况会下降。
		</div>

		<button id="change-size">改变宽高</button>

		<script type="text/javascript">
			var eleResize = new ElementResize('#content');
			eleResize.listen(function() {
				console.log('size change!')
			})

			//改变宽高
			document.querySelector('#change-size').addEventListener('click', function() {
				let cont = document.querySelector('#content');
				cont.style.width = Math.floor((Math.random() * (document.documentElement.clientWidth - 500)) + 500) + 'px';
				cont.style.height = Math.floor(Math.random() * 300) + 'px';
			}, false)
		</script>
	</body>
</html>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DIV宽高监听</title>
		<style type="text/css">
			#content {
				overflow: auto;
			}
		</style>
	</head>
	<body>
		<div id="content">
			钟南山：非洲如果预防得好，天热时疫情会下降

			另外，会上有外籍人士提问：假如你现在去非洲，首先要做的是什么？

			钟南山表示：现在要做的是防护，防止蔓延是最重要的。

			在非洲，这段时间如果预防得好，也可能到天热时，疫情发展情况会下降。
		</div>
		<button id="change-size">改变宽高</button>

		<script type="text/javascript">
			(function() {
				let self = this;
				/**
				 * 元素宽高监听
				 * @param {Object} el 监听元素选择器
				 */
				function ElementResize(eleSelector) {
					if (!(this instanceof ElementResize)) return;
					if (!eleSelector) return;
					this.eleSelector = eleSelector;
					this.el = document.querySelector(eleSelector);
					this.queue = [];
					this.__init(); //globel init
				}

				//初始化
				ElementResize.prototype.__init = function() {
					let iframe = this.crateIElement();
					this.el.style.position = 'relative';
					this.el.appendChild(iframe)
					this.bindEvent(iframe.contentWindow);
				}

				/**
				 * 设置元素样式
				 * @param {HTMLObject} el
				 * @param {Object} styleJson
				 */
				ElementResize.prototype.setStyle = function(el, styleJson) {
					if (!el) return;
					styleJson = styleJson || {
						opacity: 0,
						'z-index': '-1111',
						position: 'absolute',
						left: 0,
						top: 0,
						width: '100%',
						height: '100%',
					};
					let styleText = '';
					for (key in styleJson) {
						styleText += (key + ':' + styleJson[key] + ';');
					}
					el.style.cssText = styleText;
				}

				/**
				 * 创建元素
				 * @param {Object} style
				 */
				ElementResize.prototype.crateIElement = function(style) {
					let iframe = document.createElement('iframe');
					this.setStyle(iframe);
					return iframe;
				}

				/**
				 * 绑定事件
				 * @param {Object} el
				 */
				ElementResize.prototype.bindEvent = function(el) {
					if (!el) return;
					var _self = this;
					el.addEventListener('resize', function() {
						_self.runQueue();
					}, false)
				}

				/**
				 * 运行队列
				 */
				ElementResize.prototype.runQueue = function() {
					let queue = this.queue;
					for (var i = 0; i < queue.length; i++) {
						(typeof queue[i]) === 'function' && queue[i].apply(this);
					}
				}

				/**
				 * 外部监听
				 * @param {Object} cb 回调函数
				 */
				ElementResize.prototype.listen = function(cb) {
					if (typeof cb !== 'function') throw new TypeError('cb is not a function!');
					this.queue.push(cb);
				}

				self.ElementResize = ElementResize;
			})()
			
			//创建一个监听实例
			var eleResize = new ElementResize('#content');
			eleResize.listen(function() {
				console.log('我是listener')
			})

			//宽高切换
			document.querySelector('#change-size').addEventListener('click', function() {
				let cont = document.querySelector('#content');
				cont.style.width = Math.floor((Math.random() * (document.documentElement.clientWidth - 500)) + 500) + 'px';
				cont.style.height = Math.floor(Math.random() * 300) + 'px';
			}, false)
		</script>
	</body>
</html>

更多功能正在更新中...

iframe,监听,DOM,元素

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“通过iframe监听一个DOM元素大小变化”

暂无评论...

通过iframe监听一个DOM元素大小变化

利用CSS中的 outline-offset 属性实现加号

CSS 实现渐变效果小结( linear-gradient线性渐变和 radial-gradient径向渐变)

评论“通过iframe监听一个DOM元素大小变化”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接

通过iframe监听一个DOM元素大小变化

利用CSS中的 outline-offset 属性实现加号

CSS 实现渐变效果小结( linear-gradient线性渐变 和 radial-gradient径向渐变)

评论“通过iframe监听一个DOM元素大小变化”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接

CSS 实现渐变效果小结( linear-gradient线性渐变和 radial-gradient径向渐变)