下面是@nkron的简化版本的解决方案，适用于单个元素(而不是@nkron的答案中的元素数组，我不需要复杂性)。

function onResizeElem(element, callback) {    
  // Save the element we are watching
  onResizeElem.watchedElementData = {
    element: element,
    offsetWidth: element.offsetWidth,
    offsetHeight: element.offsetHeight,
    callback: callback
  };

  onResizeElem.checkForChanges = function() {
    const data = onResizeElem.watchedElementData;
    if (data.element.offsetWidth !== data.offsetWidth || data.element.offsetHeight !== data.offsetHeight) {
      data.offsetWidth = data.element.offsetWidth;
      data.offsetHeight = data.element.offsetHeight;
      data.callback();
    }
  };

  // Listen to the window resize event
  window.addEventListener('resize', onResizeElem.checkForChanges);

  // Listen to the element being checked for width and height changes
  onResizeElem.observer = new MutationObserver(onResizeElem.checkForChanges);
  onResizeElem.observer.observe(document.body, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true
  });
}

事件监听器和观察者可以通过以下方式删除:

window.removeEventListener('resize', onResizeElem.checkForChanges);
onResizeElem.observer.disconnect();

当MarcJ的解决方案不起作用时，我发现这个库可以工作:

https://github.com/sdecima/javascript-detect-element-resize

它是非常轻量级的，甚至可以通过CSS或简单的HTML加载/渲染来检测自然的大小调整。

代码示例(摘自链接):

<script type="text/javascript" src="detect-element-resize.js"></script>
<script type="text/javascript">
  var resizeElement = document.getElementById('resizeElement'),
      resizeCallback = function() {
          /* do something */
      };
  addResizeListener(resizeElement, resizeCallback);
  removeResizeListener(resizeElement, resizeCallback);
</script>

您可以使用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

纯香草的实现。

var move = function(e) { if ((e.w && e.w !== e.offsetWidth) || (e.h && e.h !== e.offsetHeight)) { new Function(e.getAttribute('onresize')).call(e); } e.w = e.offsetWidth; e.h = e.offsetHeight; } var resize = function(e) { e.innerText = 'New dimensions: ' + e.w + ',' + e.h; } .resizable { resize: both; overflow: auto; width: 200px; border: 1px solid black; padding: 20px; } <div class='resizable' onresize="resize(this)" onmousemove="move(this)"> Pure vanilla implementation </div>

这是一个非常老的问题，但我想我会把我的解决方案贴出来。

我尝试使用resizsensor，因为每个人似乎都对它有很大的好感。在实现之后，我意识到在底层，元素查询要求所讨论的元素具有相对位置或绝对位置，这不适用于我的情况。

我最终用Rxjs间隔来处理这个问题，而不是像以前的实现那样直接使用setTimeout或requestAnimationFrame。

间隔的可观察对象的好处在于，你可以修改流，但任何其他可观察对象都可以被处理。对我来说，一个基本的实现就足够了，但是你可以疯狂地做各种各样的合并等等。

在下面的例子中，我正在跟踪内部(绿色)div的宽度变化。它的宽度设置为50%，但max-width为200px。拖动滑块会影响包装器(灰色)div的宽度。你可以看到，只有当内部div的宽度发生变化时，可观察对象才会触发，只有当外部div的宽度小于400px时才会发生这种情况。

const { interval } = rxjs; const { distinctUntilChanged, map, filter } = rxjs.operators; const wrapper = document.getElementById('my-wrapper'); const input = document.getElementById('width-input'); function subscribeToResize() { const timer = interval(100); const myDiv = document.getElementById('my-div'); const widthElement = document.getElementById('width'); const isMax = document.getElementById('is-max'); /* NOTE: This is the important bit here */ timer .pipe( map(() => myDiv ? Math.round(myDiv.getBoundingClientRect().width) : 0), distinctUntilChanged(), // adding a takeUntil(), here as well would allow cleanup when the component is destroyed ) .subscribe((width) => { widthElement.innerHTML = width; isMax.innerHTML = width === 200 ? 'Max width' : '50% width'; }); } function defineRange() { input.min = 200; input.max = window.innerWidth; input.step = 10; input.value = input.max - 50; } function bindInputToWrapper() { input.addEventListener('input', (event) => { wrapper.style.width = `${event.target.value}px`; }); } defineRange(); subscribeToResize(); bindInputToWrapper(); .inner { width: 50%; max-width: 200px; } /* Aesthetic styles only */ .inner { background: #16a085; } .wrapper { background: #ecf0f1; color: white; margin-top: 24px; } .content { padding: 12px; } body { font-family: sans-serif; font-weight: bold; } <script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script> <h1>Resize Browser width</h1> <label for="width-input">Adjust the width of the wrapper element</label> <div> <input type="range" id="width-input"> </div> <div id="my-wrapper" class="wrapper"> <div id="my-div" class="inner"> <div class="content"> Width: <span id="width"></span>px <div id="is-max"></div> </div> </div> </div>

使用Clay.js (https://github.com/zzarcon/clay)，检测元素大小的变化非常简单:

var el = new Clay('.element');

el.on('resize', function(size) {
    console.log(size.height, size.width);
});