通過iframe監(jiān)聽一個DOM元素大小變化
發(fā)布時間：2020-04-17 15:59:00 作者：佚名 
我要評論
我要評論開發(fā)過程中經(jīng)常遇到的一個問題就是如何監(jiān)聽一個 div 的size變化。今天小編通過本文給大家介紹通過iframe元素來實(shí)現(xiàn)監(jiān)聽。本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
開發(fā)過程中經(jīng)常遇到的一個問題就是如何監(jiān)聽一個 div 的size變化。比如我用canvas繪制了一個chart，當(dāng)canvas的size發(fā)生變化的時候，需要重新繪制里面的內(nèi)容，這個時候就需要監(jiān)聽resize事件做處理。window上雖然有resize事件監(jiān)聽，但這并不能滿足我們的需求，因?yàn)楹芏鄷r候，div的size發(fā)生了變化，實(shí)際 window.resize 事件并未觸發(fā)。
對于div的resize事件的監(jiān)聽，實(shí)現(xiàn)方式有很多，比如定時器檢查，通過scroll事件等等，本文主要介紹通過iframe元素來實(shí)現(xiàn)監(jiān)聽。
不過我們可以間接利用window的resize事件監(jiān)聽來實(shí)現(xiàn)對于某個div的resize事件監(jiān)聽，請看下面具體實(shí)現(xiàn)。
2. 實(shí)現(xiàn)原理
- 動態(tài)創(chuàng)建 iframe 標(biāo)簽，追加到容器中，寬高繼承容器100%；
- 獲取 iframe 中的window，通過 contentWindow 屬性就能獲取到；
- 由于 iframe 的寬高繼承與父節(jié)點(diǎn)，當(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)
}
/**
* 運(yùn)行隊列
*/
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)聽實(shí)例
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)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個非?；A(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項目中使用它們2025-04-07- will-change 是一個 CSS 屬性，用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實(shí)現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式；通過數(shù)組語法,可以同時綁定多個類名或樣式,此外2025-02-26
