DDR爱好者之家

通过iframe监听一个DOM元素大小变化
站长资源 2024/11/24 佚名
31 1538
DDR爱好者之家 Design By 杰米

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

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

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米