原生Js監聽普通dom尺寸變化
具體做法有以下幾種：
- 初始化項目后，輪詢，反復查看 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 事件。參考文章