我正在尝试检测我的document 高度何时发生变化。完成后，我需要运行一些函数来帮助组织我的页面布局。
我不是在寻找window.onresize。我需要整个文档，比窗口大。
我如何观察这种变化？
【问题讨论】：
$.animate()s，但它确实会选择何时删除/添加元素。
resizeObserver 是一个很棒的 API (support table)
// create an Observer instance
const resizeObserver = new ResizeObserver(entries =>
console.log('Body height changed:', entries[0].target.clientHeight)
)
// start observing a DOM node
resizeObserver.observe(document.body)
// click anywhere to rnadomize height
window.addEventListener('click', () =>
document.body.style.height = Math.floor((Math.random() * 5000) + 1) + 'px'
)click anywhere to change the height虽然是“hack”，但这个简单的函数会持续“监听”（通过 setTimeout）元素高度的变化，并在检测到变化时触发回调。
重要的是要考虑到元素的高度可能会随着用户采取任何操作（调整大小、点击等）发生变化。 ) 等，因为不可能知道什么会导致高度变化，为了绝对保证 100% 检测，所有可以做的就是放置一个间隔高度检查器：
function onElementHeightChange(elm, callback) {
var lastHeight = elm.clientHeight, newHeight;
(function run() {
newHeight = elm.clientHeight;
if (lastHeight != newHeight)
callback(newHeight)
lastHeight = newHeight
if (elm.onElementHeightChangeTimer)
clearTimeout(elm.onElementHeightChangeTimer)
elm.onElementHeightChangeTimer = setTimeout(run, 200)
})()
}
// to clear the timer use:
// clearTimeout(document.body.onElementHeightChangeTimer);
// DEMO:
document.write("click anywhere to change the height")
onElementHeightChange(document.body, function(h) {
console.log('Body height changed:', h)
})
window.addEventListener('click', function() {
document.body.style.height = Math.floor((Math.random() * 5000) + 1) + 'px'
})【讨论】：
您可以在要监视高度变化的元素内部使用定位为零的absolute iframe，并在其contentWindow 上监听resize 事件。例如：
HTML
<body>
Your content...
<iframe class="height-change-listener" tabindex="-1"></iframe>
</body>
CSS
body {
position: relative;
}
.height-change-listener {
position: absolute;
top: 0;
bottom: 0;
left: 0;
height: 100%;
width: 0;
border: 0;
background-color: transparent;
}
JavaScript（使用 jQuery，但可以适配纯 JS）
$('.height-change-listener').each(function() {
$(this.contentWindow).resize(function() {
// Do something more useful
console.log('doc height is ' + $(document).height());
});
});
如果出于某种原因您在body 上设置了height:100%，您将需要找到（或添加）另一个容器元素来实现它。如果您想动态添加iframe，您可能需要使用<iframe>.load 事件来附加contentWindow.resize 侦听器。如果您希望它在 IE7 和浏览器中工作，您需要将 *zoom:1 hack 添加到容器元素，并在 <iframe> 元素本身上侦听“专有”resize 事件（这将在 IE8-10 中重复 contentWindow.resize）。
【讨论】：
100vh 而不是100% 会更好。但是，您将失去与一些不支持视口高度的旧浏览器的兼容性。
100vh 将是视口（也称为窗口）的高度，而我们希望文档的高度（即内容，这不是同一件事）检测何时发生变化，100% 提供。 （当视口高度随window.resize 事件发生变化时很容易检测到。）
$($('.height-change-listener')[0].contentWindow).on('resize', doSomethingMoreUseful);
只有我的两分钱。如果您有任何机会使用角度，那么这将完成这项工作：
$scope.$watch(function(){
return document.height();
},function onHeightChange(newValue, oldValue){
...
});
【讨论】：
更新：2020 年
现在有一种方法可以使用新的ResizeObserver 完成此操作。这使您可以在元素更改大小时收听整个元素列表。基本用法相当简单：
const observer = new ResizeObserver(entries => {
for (const entry of entries) {
// each entry is an instance of ResizeObserverEntry
console.log(entry.contentRect.height)
}
})
observer.observe(document.querySelector('body'))
一个缺点是目前只支持 Chrome/Firefox，但你可以在那里找到一些可靠的 polyfill。这是我写的一个codepen示例：
https://codepen.io/justin-schroeder/pen/poJjGJQ?editors=1111
【讨论】：
正如 vsync 所说，没有事件，但您可以使用计时器或将处理程序附加到其他地方：
// get the height
var refreshDocHeight = function(){
var h = $(document).height();
$('#result').html("Document height: " + h);
};
// update the height every 200ms
window.setInterval(refreshDocHeight, 200);
// or attach the handler to all events which are able to change
// the document height, for example
$('div').keyup(refreshDocHeight);
【讨论】：
vsync 的回答完全没问题。以防万一您不喜欢使用setTimeout，您可以使用requestAnimationFrame (see support)，当然您仍然感兴趣。
在下面的示例中，主体获得了一个额外的事件sizechange。并且每次身体的高度或宽度发生变化时都会触发。
(function checkForBodySizeChange() {
var last_body_size = {
width: document.body.clientWidth,
height: document.body.clientHeight
};
function checkBodySizeChange()
{
var width_changed = last_body_size.width !== document.body.clientWidth,
height_changed = last_body_size.height !== document.body.clientHeight;
if(width_changed || height_changed) {
trigger(document.body, 'sizechange');
last_body_size = {
width: document.body.clientWidth,
height: document.body.clientHeight
};
}
window.requestAnimationFrame(checkBodySizeChange);
}
function trigger(element, event_name, event_detail)
{
var evt;
if(document.dispatchEvent) {
if(typeof CustomEvent === 'undefined') {
var CustomEvent;
CustomEvent = function(event, params) {
var evt;
params = params || {
bubbles: false,
cancelable: false,
detail: undefined
};
evt = document.createEvent("CustomEvent");
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
};
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
}
evt = new CustomEvent(event_name, {"detail": event_detail});
element.dispatchEvent(evt);
}
else {
evt = document.createEventObject();
evt.eventType = event_name;
evt.eventName = event_name;
element.fireEvent('on' + event_name, evt);
}
}
window.requestAnimationFrame(checkBodySizeChange);
})();
如果您的项目中有自己的triggerEvent 函数，则代码可以大大减少。因此只需删除完整的函数trigger 并将trigger(document.body, 'sizechange'); 行替换为例如jQuery 中的$(document.body).trigger('sizechange');。
【讨论】：
requestAnimationFrame 代替setTimout（或者setInterval）的一个缺点是大小检查循环运行太频繁，每隔几毫秒。使用setTimeout，您可以将循环间隔增加到合理的数量。
我正在使用@vsync 的解决方案，就像这样。我正在使用它在 twitter 之类的页面上自动滚动。
const scrollInterval = (timeInterval, retry, cb) => {
let tmpHeight = 0;
const myInterval = setInterval(() => {
console.log('interval');
if (retry++ > 3) {
clearInterval(this);
}
const change = document.body.clientHeight - tmpHeight;
tmpHeight = document.body.clientHeight;
if (change > 0) {
cb(change, (retry * timeInterval));
scrollBy(0, 10000);
}
retry = 0;
}, timeInterval);
return myInterval;
};
const onBodyChange = (change, timeout) => {
console.log(`document.body.clientHeight, changed: ${change}, after: ${timeout}`);
}
const createdInterval = scrollInterval(500, 3, onBodyChange);
// stop the scroller on some event
setTimeout(() => {
clearInterval(createdInterval);
}, 10000);
您还可以添加一个最小的更改，以及许多其他的东西......但这对我有用
【讨论】：
命令 watch() 检查属性的任何变化。
看到这个link。
【讨论】：