资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

使用iframe监听DOM元素

使用iframe监听DOM元素?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

成都创新互联长期为上1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为济水街道企业提供专业的成都做网站、成都网站建设,济水街道网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

实现原理

  • 动态创建 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宽高监听
    
        #content {
        overflow: auto;
			}
		
	
	
	
            钟南山:非洲如果预防得好,天热时疫情会下降
        	另外,会上有外籍人士提问:假如你现在去非洲,首先要做的是什么?
        	钟南山表示:现在要做的是防护,防止蔓延是最重要的。
        	在非洲,这段时间如果预防得好,也可能到天热时,疫情发展情况会下降。
		
改变宽高 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)

完整代码



	
		
		DIV宽高监听
		
			#content {
				overflow: auto;
			}
		
	
	
		
			钟南山:非洲如果预防得好,天热时疫情会下降

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

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

			在非洲,这段时间如果预防得好,也可能到天热时,疫情发展情况会下降。
		
改变宽高 (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)

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。


本文标题:使用iframe监听DOM元素
分享网址:http://cdkjz.cn/article/ppooes.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:400-028-6601 / 大客户专线   成都:13518219792   座机:028-86922220