如何用iframe监听DOM元素，实现原理是什么-群英

上一篇：用CSS怎么实现鼠标悬停出现渐变的效果下一篇：使用flex布局如何使得内容不会超出容器

在实际应用中，我们有时候会遇到“如何用iframe监听DOM元素，实现原理是什么”这样的问题，我们该怎样来处理呢？下文给大家介绍了解决方法，希望这篇“如何用iframe监听DOM元素，实现原理是什么”文章能帮助大家解决问题。

开发过程中经常遇到的一个问题就是如何监听一个 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元素，实现原理是什么”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！