原生Js監聽普通dom尺寸變化

時間 2019-11-10

原文原文鏈接

原生Js監聽普通dom尺寸變化

具體作法有如下幾種：javascript

初始化項目後，輪詢，反覆查看 dom 尺寸是否變化，這種一聽就感受很差，開銷太大。
監聽元素的滾動事件，在目標 dom 裏面包裹一個同等大小的 div，是隱藏不可見的，當目標 dom 大小變化時，觸發滾動事件。參考文章
經過 MutationObserver 監聽dom 節點變化，MutationObserver 是在DOM4規範中定義的，它的前身是 MutationEvent 事件，該事件最初在 DOM2 事件規範中介紹，到來了 DOM3 事件規範中正式定義，可是因爲該事件存在兼容性以及性能上的問題被棄用；能夠用它來監聽 dom style 的變化, demo 代碼，文檔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="demo" style="background: blue; height: 200px; width: 100%">
        demo 內容
    </div>
    <script>
        var observer = new MutationObserver(function (mutations, observer) {
            mutations.forEach(function (mutation) {
                console.log(mutation);
            });
        });
        var config = {
            attributes: true,
            attributeOldValue: true,
            attributeFilter: [
                'style'
            ]
        };
        var el = document.getElementById('demo');
        
        observer.observe(el, config);
    </script>
</body>
</html>

Ie9-10 默認支持 div 的 resize 事件，能夠直接經過 div.attachEvent('onresize', handler); 的方式實現;其它瀏覽器,經過在 div 中添加一個內置 object 元素實現監聽,設置 object 元素的 style 使其填充滿 div，這樣當 div 的 size 發生變化時，object 的 size 也會發生變化,而後監聽 object 元素的 contentDocument.defaultView(window對象)的 resize 事件。參考文章