原生Js监听普通dom尺寸变化
原生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 事件。参考文章
