資訊專欄INFORMATION COLUMN
摘要：上網(wǎng)找了找，對(duì)于的事件的監(jiān)聽(tīng)，實(shí)現(xiàn)方式有很多，比如基于的小插件通過(guò)元素進(jìn)行監(jiān)聽(tīng)來(lái)監(jiān)聽(tīng)元素基于的周期性檢查雖然是實(shí)現(xiàn)了對(duì)元素寬高的監(jiān)聽(tīng)，但看上去很瓜。
簡(jiǎn)單點(diǎn)說(shuō)，就是：
在被監(jiān)聽(tīng)的 div 中添加 iframe 標(biāo)簽，設(shè)置其高寬均為 100%；
在 iframe 的 resize 被觸發(fā)時(shí)，則表明 div 的大小正在改變！
參考
Resize on div element 來(lái)源于stackoverflow 的回答
歷程日常開(kāi)發(fā)中，遇到元素寬高改變時(shí)需要廣播事件，由于此時(shí)窗口大小并未改變，故添加resize回調(diào)沒(méi)用；而且該元素是因?yàn)槟承ヾom隱藏，其高寬自適應(yīng)所導(dǎo)致，而不是通過(guò)js設(shè)置，故 MutationObserver 也無(wú)法監(jiān)聽(tīng)到。
上網(wǎng)找了找，對(duì)于div的resize事件的監(jiān)聽(tīng)，實(shí)現(xiàn)方式有很多，比如：
基于jquery的小插件
通過(guò)object元素進(jìn)行監(jiān)聽(tīng)
scroll來(lái)監(jiān)聽(tīng)元素resize
基于requestanimationframe的周期性檢查
雖然是實(shí)現(xiàn)了對(duì)元素寬高的監(jiān)聽(tīng)，但看上去很瓜。直到看到了stackoverflow 的回答...
代碼這是我們要監(jiān)聽(tīng)的元素和樣式
模擬resize的函數(shù)，參數(shù)el為被監(jiān)聽(tīng)的元素，cb為回調(diào)函數(shù)
function riseze (el, cb) {
// 創(chuàng)建iframe標(biāo)簽，設(shè)置樣式并插入到被監(jiān)聽(tīng)元素中
var iframe = document.createElement("iframe");
iframe.setAttribute("class", "size-watch");
el.appendChild(iframe);
// 記錄元素當(dāng)前寬高
var oldWidth = el.offsetWidth;
var oldHeight = el.offsetHeight;
// iframe 大小變化時(shí)的回調(diào)函數(shù)
function sizeChange () {
// 記錄元素變化后的寬高
var width = el.offsetWidth;
var height = el.offsetHeight;
// 不一致時(shí)觸發(fā)回調(diào)函數(shù) cb，并更新元素當(dāng)前寬高
if (width !== oldWidth || height !== oldHeight) {
cb({width: width, height: height}, {width: oldWidth, height: oldHeight});
oldWidth = width;
oldHeight = height;
}
}
// 設(shè)置定時(shí)器用于節(jié)流
var timer = 0;
// 將 sizeChange 函數(shù)掛載到 iframe 的resize回調(diào)中
iframe.contentWindow.onresize = function () {
clearTimeout(timer);
timer = setTimeout(sizeChange, 20);
};
}
這邊是iframe的樣式
.size-watch {
width: 100%;
height: 100%;
position: absolute;
visibility:hidden;
margin: 0;
padding: 0;
border: 0;
}
測(cè)試
試一哈...
結(jié)果就是這樣子
溜溜球~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98051.html
摘要：上網(wǎng)找了找，對(duì)于的事件的監(jiān)聽(tīng)，實(shí)現(xiàn)方式有很多，比如基于的小插件通過(guò)元素進(jìn)行監(jiān)聽(tīng)來(lái)監(jiān)聽(tīng)元素基于的周期性檢查雖然是實(shí)現(xiàn)了對(duì)元素寬高的監(jiān)聽(tīng)，但看上去很瓜。 簡(jiǎn)單點(diǎn)說(shuō)，就是： 在被監(jiān)聽(tīng)的 div 中添加 iframe 標(biāo)簽，設(shè)置其高寬均為 100%； 在 iframe 的 resize 被觸發(fā)時(shí)，則表明 div 的大小正在改變！ 參考 Resize on div el...
摘要：構(gòu)造函數(shù)，參數(shù)為回調(diào)函數(shù)構(gòu)造函數(shù)為，它在監(jiān)聽(tīng)到中的改變并且一系列改變結(jié)束后觸發(fā)回調(diào)函數(shù)。是要監(jiān)聽(tīng)的元素，為監(jiān)聽(tīng)選項(xiàng)對(duì)象，可選的選項(xiàng)如下所以監(jiān)聽(tīng)元素寬高變化，就是監(jiān)聽(tīng)屬性變化這樣當(dāng)元素發(fā)生變化時(shí)，就會(huì)觸發(fā)構(gòu)造函數(shù)中的函數(shù)。 一、js監(jiān)聽(tīng)window變化的方法 1、onsize只能監(jiān)聽(tīng)window對(duì)象的變化 (1)、 window對(duì)象原生、jQuery方法 //原生寫(xiě)法 window.on...
摘要：哈哈哈哈，以上純屬虛構(gòu)，不過(guò)在最近項(xiàng)目中還真遇到過(guò)對(duì)容器監(jiān)聽(tīng)高寬變化在使用或滾動(dòng)插件，如果容器內(nèi)部元素有高度變化要去及時(shí)更新外部包裹容器，即調(diào)用方法。處理很簡(jiǎn)單，只需在動(dòng)畫(huà)停止事件觸發(fā)時(shí)監(jiān)聽(tīng)高寬變化即可。 前言 老鳥(niǎo)：怎樣去監(jiān)聽(tīng) DOM 元素的高度變化呢？菜鳥(niǎo)：哈哈哈哈哈，這都不知道哦，用 onresize 事件鴨！老鳥(niǎo)扶了扶眼睛，空氣安靜幾秒鐘，菜鳥(niǎo)才晃過(guò)神來(lái)。對(duì)鴨，普通 DOM 元...
閱讀 3158·2021-11-08 13:18
閱讀 2295·2019-08-30 15:55
閱讀 3616·2019-08-30 15:44
閱讀 3079·2019-08-30 13:07
閱讀 2788·2019-08-29 17:20
閱讀 1957·2019-08-29 13:03
閱讀 3422·2019-08-26 10:32
閱讀 3235·2019-08-26 10:15
