js监听元素尺寸变化

我会带着你远行 2022-08-31 02:12 334阅读 0赞

上代码：

/**
     * @description 监听元素尺寸变化
     * @author: hruomei
     * @update
     * @date: 2021-07-22 11:29:40
     */
    
    export default class ResizeObserver {
        constructor() {}
    
        static handleResize(e) {
            const trigger = e.target.__resizeTrigger__;
    
            if (!trigger) return;
    
            const handlers = trigger.__z_resizeListeners;
            if (handlers) {
                handlers.forEach(({ handler, context }) => {
                    handler.apply(context, [e]);
                });
            }
        }
    
        static removeHandler(ele, handler, context) {
            const handlers = ele.__z_resizeListeners;
    
            if (!handlers) return;
            ele.__z_resizeListeners = handlers.filter(
                h => !(h.handler === handler && h.context === context)
            );
        }
    
        static createResizeTrigger(ele) {
            let obj = document.createElement('object');
            obj.setAttribute(
                'style',
                'display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;opacity: 0; pointer-events: none; z-index: -1;'
            );
            obj.onload = ResizeObserver.handleObjectLoad;
            obj.type = 'text/html';
            ele.appendChild(obj);
            obj.data = 'about:blank';
            return obj;
        }
    
        static handleObjectLoad() {
            this.contentDocument.defaultView.__resizeTrigger__ = this.__resizeElement__;
            this.contentDocument.defaultView.addEventListener('resize', ResizeObserver.handleResize);
        }
    
        on(ele, handler, context) {
            if (!ele) throw new Error('illegal element')
    
            let handlers = ele.__z_resizeListeners;
    
            if (!handlers) {
                handlers = [];
                ele.__z_resizeListeners = handlers;
    
                if (window.getComputedStyle(ele, null).position === 'static') {
                    ele.style.position = 'relative';
                }
    
                let obj = ResizeObserver.createResizeTrigger(ele);
                ele.__resizeTrigger__ = obj;
                obj.__resizeElement__ = ele;
            }
    
            handlers.push({
                handler,
                context
            });
        }
    
        off(ele, handler, context) {
            if (!ele) throw new Error('illegal element')
    
            let handlers = ele.__z_resizeListeners;
    
            if (!handlers) return;
    
            ResizeObserver.removeHandler(ele, handler, context);
    
            if (!handlers.length) {
                let trigger = ele.__resizeTrigger__;
    
                if (trigger) {
                    trigger.contentDocument.defaultView.removeEventListener('resize', ResizeObserver.handleResize);
                    ele.removeChild(trigger);
                    delete ele.__resizeTrigger__;
                }
    
                delete ele.__z_resizeListeners;
            }
        }
    }

用法：

const resizeObserver = new ResizeObserver();
    const element = document.getElementById('netcallLeftWrapper');
    const callback = () => {
        console.log('leftWrapper尺寸变化')
    });
    
    // 监听resize事件
    resizeObserver.on(element, callback, this);
    
    // 取消监听resize事件
    resizeObserver.off(element, callback, this);