監聽div的resize

TNFE 發布于2019-08-23 12:10 / 2629人閱讀

摘要：上網找了找，對于的事件的監聽，實現方式有很多，比如基于的小插件通過元素進行監聽來監聽元素基于的周期性檢查雖然是實現了對元素寬高的監聽，但看上去很瓜。

  簡單點說，就是：
     在被監聽的 div 中添加 iframe 標簽，設置其高寬均為 100%；
     在 iframe 的 resize 被觸發時，則表明 div 的大小正在改變！

參考

Resize on div element 來源于stackoverflow 的回答

歷程

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

基于jquery的小插件
通過object元素進行監聽
scroll來監聽元素resize
基于requestanimationframe的周期性檢查

雖然是實現了對元素寬高的監聽，但看上去很瓜。直到看到了stackoverflow 的回答...

代碼

這是我們要監聽的元素和樣式

模擬resize的函數，參數el為被監聽的元素，cb為回調函數

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

    // 記錄元素當前寬高
    var oldWidth = el.offsetWidth;
    var oldHeight = el.offsetHeight;

    // iframe 大小變化時的回調函數
    function sizeChange () {
        // 記錄元素變化后的寬高
        var width = el.offsetWidth;
        var height = el.offsetHeight;
        // 不一致時觸發回調函數 cb，并更新元素當前寬高
        if (width !== oldWidth || height !== oldHeight) {
            cb({width: width, height: height}, {width: oldWidth, height: oldHeight});
            oldWidth = width;
            oldHeight = height;
        }
    }

    // 設置定時器用于節流
    var timer = 0;
    // 將 sizeChange 函數掛載到 iframe 的resize回調中
    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;
}

測試

試一哈...

結果就是這樣子

溜溜球~

GPU云服務器云服務器 resizable resize resize2fs div的高度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/98051.html

監聽div的resize

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

legendaryedu 2019-08-02 11:37 評論0 收藏0
js監聽div元素的寬高變化

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

lansheng228 2019-08-23 18:21 評論0 收藏0
如何優雅監聽容器高度變化

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

hizengzeng 2019-08-26 10:20 評論0 收藏0