国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

監(jiān)聽div的resize

TNFE / 2628人閱讀

摘要：上網(wǎng)找了找，對于的事件的監(jiān)聽，實(shí)現(xiàn)方式有很多，比如基于的小插件通過元素進(jìn)行監(jiān)聽來監(jiān)聽元素基于的周期性檢查雖然是實(shí)現(xiàn)了對元素寬高的監(jiān)聽，但看上去很瓜。

  簡單點(diǎn)說，就是：
     在被監(jiān)聽的 div 中添加 iframe 標(biāo)簽，設(shè)置其高寬均為 100%；
     在 iframe 的 resize 被觸發(fā)時，則表明 div 的大小正在改變！
參考

Resize on div element 來源于stackoverflow 的回答

歷程

日常開發(fā)中，遇到元素寬高改變時需要廣播事件，由于此時窗口大小并未改變，故添加resize回調(diào)沒用；而且該元素是因為某些dom隱藏，其高寬自適應(yīng)所導(dǎo)致，而不是通過js設(shè)置，故 MutationObserver 也無法監(jiān)聽到。
上網(wǎng)找了找，對于div的resize事件的監(jiān)聽，實(shí)現(xiàn)方式有很多，比如：

基于jquery的小插件
通過object元素進(jìn)行監(jiān)聽
scroll來監(jiān)聽元素resize
基于requestanimationframe的周期性檢查

雖然是實(shí)現(xiàn)了對元素寬高的監(jiān)聽，但看上去很瓜。直到看到了stackoverflow 的回答...

代碼

這是我們要監(jiān)聽的元素和樣式

模擬resize的函數(shù)，參數(shù)el為被監(jiān)聽的元素，cb為回調(diào)函數(shù)

function riseze (el, cb) {
    // 創(chuàng)建iframe標(biāo)簽，設(shè)置樣式并插入到被監(jiān)聽元素中
    var iframe = document.createElement("iframe");
    iframe.setAttribute("class", "size-watch");
    el.appendChild(iframe);

    // 記錄元素當(dāng)前寬高
    var oldWidth = el.offsetWidth;
    var oldHeight = el.offsetHeight;

    // iframe 大小變化時的回調(diào)函數(shù)
    function sizeChange () {
        // 記錄元素變化后的寬高
        var width = el.offsetWidth;
        var height = el.offsetHeight;
        // 不一致時觸發(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è)置定時器用于節(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;
}
測試

試一哈...

結(jié)果就是這樣子

溜溜球~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98051.html

相關(guān)文章

  • 監(jiān)聽div的resize

    摘要：上網(wǎng)找了找，對于的事件的監(jiān)聽，實(shí)現(xiàn)方式有很多，比如基于的小插件通過元素進(jìn)行監(jiān)聽來監(jiān)聽元素基于的周期性檢查雖然是實(shí)現(xiàn)了對元素寬高的監(jiān)聽，但看上去很瓜。 簡單點(diǎn)說，就是： 在被監(jiān)聽的 div 中添加 iframe 標(biāo)簽，設(shè)置其高寬均為 100%； 在 iframe 的 resize 被觸發(fā)時，則表明 div 的大小正在改變！ 參考 Resize on div el...

    legendaryedu 評論0 收藏0

  • js監(jiān)聽div元素的寬高變化

    摘要：構(gòu)造函數(shù)，參數(shù)為回調(diào)函數(shù)構(gòu)造函數(shù)為，它在監(jiān)聽到中的改變并且一系列改變結(jié)束后觸發(fā)回調(diào)函數(shù)。是要監(jiān)聽的元素，為監(jiān)聽選項對象，可選的選項如下所以監(jiān)聽元素寬高變化，就是監(jiān)聽屬性變化這樣當(dāng)元素發(fā)生變化時，就會觸發(fā)構(gòu)造函數(shù)中的函數(shù)。 一、js監(jiān)聽window變化的方法 1、onsize只能監(jiān)聽window對象的變化 (1)、 window對象原生、jQuery方法 //原生寫法 window.on...

    lansheng228 評論0 收藏0

  • 如何優(yōu)雅監(jiān)聽容器高度變化

    摘要：哈哈哈哈，以上純屬虛構(gòu)，不過在最近項目中還真遇到過對容器監(jiān)聽高寬變化在使用或滾動插件，如果容器內(nèi)部元素有高度變化要去及時更新外部包裹容器，即調(diào)用方法。處理很簡單，只需在動畫停止事件觸發(fā)時監(jiān)聽高寬變化即可。 前言 老鳥：怎樣去監(jiān)聽 DOM 元素的高度變化呢？菜鳥：哈哈哈哈哈，這都不知道哦，用 onresize 事件鴨！老鳥扶了扶眼睛，空氣安靜幾秒鐘，菜鳥才晃過神來。對鴨，普通 DOM 元...

    hizengzeng 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<