通過iframe監(jiān)聽一個DOM元素大小變化
發(fā)布時間：2020-04-17 15:59:00 作者：佚名 
我要評論
我要評論開發(fā)過程中經(jīng)常遇到的一個問題就是如何監(jiān)聽一個 div 的size變化。今天小編通過本文給大家介紹通過iframe元素來實現(xiàn)監(jiān)聽。本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
開發(fā)過程中經(jīng)常遇到的一個問題就是如何監(jiān)聽一個 div 的size變化。比如我用canvas繪制了一個chart，當(dāng)canvas的size發(fā)生變化的時候，需要重新繪制里面的內(nèi)容，這個時候就需要監(jiān)聽resize事件做處理。window上雖然有resize事件監(jiān)聽，但這并不能滿足我們的需求，因為很多時候，div的size發(fā)生了變化，實際 window.resize 事件并未觸發(fā)。
對于div的resize事件的監(jiān)聽，實現(xiàn)方式有很多，比如定時器檢查，通過scroll事件等等，本文主要介紹通過iframe元素來實現(xiàn)監(jiān)聽。
不過我們可以間接利用window的resize事件監(jiān)聽來實現(xiàn)對于某個div的resize事件監(jiān)聽，請看下面具體實現(xiàn)。
2. 實現(xiàn)原理
- 動態(tài)創(chuàng)建 iframe 標(biāo)簽，追加到容器中，寬高繼承容器100%；
- 獲取 iframe 中的window，通過 contentWindow 屬性就能獲取到；
- 由于 iframe 的寬高繼承與父節(jié)點，當(dāng)父容器寬度發(fā)生變化，自然會觸發(fā)iframe中的 resize 事件；
通過iframeWindow.resize事件來監(jiān)聽DOM大小變化，從而達(dá)到resize事件的一個監(jiān)聽；
例子
document.querySelector("#ifarme_id").contentWindow.addEventListener('resize', () => {
console.log('size Change！');
}, false)
3.調(diào)用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DIV寬高監(jiān)聽</title>
<style type="text/css">
#content {
overflow: auto;
}
</style>
</head>
<body>
<div id="content">
鐘南山：非洲如果預(yù)防得好，天熱時疫情會下降
另外，會上有外籍人士提問：假如你現(xiàn)在去非洲，首先要做的是什么？
鐘南山表示：現(xiàn)在要做的是防護(hù)，防止蔓延是最重要的。
在非洲，這段時間如果預(yù)防得好，也可能到天熱時，疫情發(fā)展情況會下降。
</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寬高監(jiān)聽</title>
<style type="text/css">
#content {
overflow: auto;
}
</style>
</head>
<body>
<div id="content">
鐘南山：非洲如果預(yù)防得好，天熱時疫情會下降
另外，會上有外籍人士提問：假如你現(xiàn)在去非洲，首先要做的是什么？
鐘南山表示：現(xiàn)在要做的是防護(hù)，防止蔓延是最重要的。
在非洲，這段時間如果預(yù)防得好，也可能到天熱時，疫情發(fā)展情況會下降。
</div>
<button id="change-size">改變寬高</button>
<script type="text/javascript">
(function() {
let self = this;
/**
* 元素寬高監(jiān)聽
* @param {Object} el 監(jiān)聽元素選擇器
*/
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);
}
/**
* 設(shè)置元素樣式
* @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;
}
/**
* 創(chuàng)建元素
* @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);
}
}
/**
* 外部監(jiān)聽
* @param {Object} cb 回調(diào)函數(shù)
*/
ElementResize.prototype.listen = function(cb) {
if (typeof cb !== 'function') throw new TypeError('cb is not a function!');
this.queue.push(cb);
}
self.ElementResize = ElementResize;
})()
//創(chuàng)建一個監(jiān)聽實例
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>
更多功能正在更新中...
到此這篇關(guān)于通過iframe監(jiān)聽一個DOM元素大小變化的文章就介紹到這了,更多相關(guān)DOM元素變化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3打造的現(xiàn)代交互式登錄界面詳細(xì)實現(xiàn)過程
本文介紹CSS3和jQuery在登錄界面設(shè)計中的應(yīng)用,涵蓋動畫、選擇器、自定義字體及盒模型技術(shù),提升界面美觀與交互性,同時優(yōu)化性能和可訪問性，感興趣的朋友跟隨小編一起看看吧2025-06-20CSS普通流、浮動與定位網(wǎng)頁布局三大機制及最佳實踐
本文給大家講解CSS 的三種核心布局機制——普通流(Normal Flow)、浮動(Float)和定位(Positioning)對于創(chuàng)建靈活、響應(yīng)式的網(wǎng)頁至關(guān)重要,本文將深入探討這三種機制的工作原2025-06-19
css實現(xiàn)角標(biāo)效果并帶有文章或圖標(biāo)效果(完整代碼)
文章介紹如何用CSS實現(xiàn)角標(biāo)效果,通過.active類結(jié)合::after和::before偽元素,利用定位、邊框和旋轉(zhuǎn)創(chuàng)建紅色邊框與白色三角形的提示標(biāo)志,適用于按鈕或卡片元素的視覺增強設(shè)計2025-06-19CSS Anchor Positioning重新定義錨點定位的時代來臨(最新推薦)
CSS Anchor Positioning是一項仍在草案中的新特性，由 Chrome 125 開始提供原生支持需啟用實驗 flag,它允許你在 CSS 中通過錨點（anchor）來相對于任意 DOM 元素定位,本文2025-06-17CSS中的Static、Relative、Absolute、Fixed、Sticky的應(yīng)用與詳細(xì)對比
CSS 中的 position 屬性用于控制元素的定位方式，不同的定位方式會影響元素在頁面中的布局和層疊關(guān)系,以下是 static、relative、absolute、fixed、sticky 的詳細(xì)對比和應(yīng)用2025-06-17CSS place-items: center解析與用法詳解
place-items: center; 是一個強大的 CSS 簡寫屬性，用于同時控制 網(wǎng)格(Grid) 和 彈性盒(Flexbox) 布局中的對齊方式，本文給大家介紹CSS place-items: center； 詳解與用法2025-06-17
在日常開發(fā)中，我們經(jīng)常需要讓某個元素占據(jù)容器的剩余空間，本文將介紹5種不同的方法來實現(xiàn)這個需求，并分析各種方法的優(yōu)缺點，感興趣的朋友一起看看吧2025-06-17CSS中前端單位 px、vw、vh 等的區(qū)別與使用建議
CSS單位區(qū)別與使用場景總結(jié)：px絕對、vw/vh響應(yīng)式,%繼承父尺寸,em/rem文字縮放,vmin/vmax適應(yīng)寬高變化,固定布局用px或%,響應(yīng)式布局用vw/vh/rem,文字用em或rem，本文給大家2025-06-16CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié)
這篇文章主要介紹了CSS 樣式表的四種應(yīng)用方式及css注釋的應(yīng)用小結(jié),本文通過實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2025-05-21- 在CSS布局中，padding屬性是控制元素內(nèi)容與其邊框之間距離的關(guān)鍵工具，本文介紹CSS基礎(chǔ)中padding，通過本文的介紹，我們深入了解了padding的基本概念、簡寫方法以及它對元2025-05-16
