我有下面的样本html，有一个DIV有100%的宽度。它包含了一些元素。在执行窗口调整大小时，内部元素可能会被重新定位，div的尺寸可能会改变。我在问是否有可能挂钩div的维度变化事件?以及如何做到这一点?我目前绑定回调函数到目标DIV上的jQuery调整大小事件，但是，没有输出控制台日志，如下所示:
<html>
<head>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" language="javascript">
$('#test_div').bind('resize', function(){
console.log('resized');
});
</script>
</head>
<body>
<div id="test_div" style="width: 100%; min-height: 30px; border: 1px dashed pink;">
<input type="button" value="button 1" />
<input type="button" value="button 2" />
<input type="button" value="button 3" />
</div>
</body>
</html>
一个更新的标准是Resize Observer api，有很好的浏览器支持。
函数输出大小（） {
宽度.值 = 文本框偏移宽度
高度.值 = 文本框偏移高度
}
输出大小（）
new ResizeObserver （outputsize）.observe（textbox）
宽度：<输出 id=“宽度”>0</output><br>
高度：<输出 id=“高度”>0</output><br>
<textarea id=“textbox”>调整我</textarea><br>的大小
调整观察者
文档:https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API
规范:https://wicg.github.io/ResizeObserver
当前支持:http://caniuse.com/#feat=resizeobserver
填充物：https://github.com/pelotoncycle/resize-observer
https://github.com/que-etc/resize-observer-polyfill
https://github.com/juggle/resize-observer
您可以使用iframe或对象使用contentWindow或contentDocument调整大小。没有setInterval或setTimeout
的步骤:
将元素位置设置为相对位置
在里面添加一个透明的绝对隐藏IFRAME
听IFRAME。contentWindow - onresize事件
HTML的一个例子:
<div style="height:50px;background-color:red;position:relative;border:1px solid red">
<iframe style=width:100%;height:100%;position:absolute;border:none;background-color:transparent allowtransparency=true>
</iframe>
This is my div
</div>
Javascript:
$('div').width(100).height(100);
$('div').animate({width:200},2000);
$('object').attr({
type : 'text/html'
})
$('object').on('resize,onresize,load,onload',function(){
console.log('ooooooooonload')
})
$($('iframe')[0].contentWindow).on('resize',function(){
console.log('div changed')
})
运行示例
JsFiddle: https://jsfiddle.net/qq8p470d/
看到更多:
粘土-它是基于元素-大小调整事件
element-resize-event
我不建议使用setTimeout()，因为它会降低性能!
相反，你可以使用DOM ResizeObserver方法来监听Div大小的变化。
const myObserver = new ResizeObserver(entries => {
// this will get called whenever div dimension changes
entries.forEach(entry => {
console.log('width', entry.contentRect.width);
console.log('height', entry.contentRect.height);
});
});
const someEl = document.querySelector('.some-element');
// start listening to changes
myObserver.observe(someEl);
// later, stop listening to changes
myObserver.disconnect();
使用MutationObserver的旧答案:
用于监听HTML元素属性、子树和类的更改:
JS:
var observer = new MutationObserver(function(mutations) {
console.log('size changed!');
});
var target = document.querySelector('.mydiv');
observer.observe(target, {
attributes: true,
childList: true,
subtree: true
});
HTML:
<div class='mydiv'>
</div>
这是小提琴。试着改变div大小。
您可以将您的方法进一步封装在debounce方法中以提高效率。debounce将每x毫秒触发一次你的方法，而不是在DIV被调整大小的每一毫秒触发一次。
