检测文档高度变化
我正在尝试检测document高度何时发生变化。 一旦它，我需要运行一些function，以帮助组织我的页面布局。
我不是在寻找window.onresize 。 我需要整个文件，比窗口大。
我如何观察这个变化？
function onElementHeightChange(elm, callback){ var lastHeight = elm.clientHeight, newHeight; (function run(){ newHeight = elm.clientHeight; if( lastHeight != newHeight ) callback(); lastHeight = newHeight; if( elm.onElementHeightChangeTimer ) clearTimeout(elm.onElementHeightChangeTimer); elm.onElementHeightChangeTimer = setTimeout(run, 200); })(); } onElementHeightChange(document.body, function(){ alert('Body height changed'); });
现场演示
只是我的两分钱。 如果有可能你使用angular度，那么这将做的工作：
$scope.$watch(function(){ return document.height(); },function onHeightChange(newValue, oldValue){ ... });
您可以在要监视高度变化的元素内使用宽度为零的absolute定位iframe ，并在其contentWindow上侦听resize事件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()); }); });
如果无论什么原因，你有height:100% body设置，你需要find（或添加）另一个容器元素来实现这一点。 如果要dynamic添加iframe可能需要使用<iframe>.load事件附加contentWindow.resize侦听器。 如果你想在IE7以及浏览器中工作，你需要在容器元素中添加*zoom:1 hack，并且在<iframe>元素本身上监听'proprietary'resize事件IE8-10中的contentWindow.resize ）。
这是一个小提琴
正如在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);
在这里findjsfiddle 。
vsync的答案是完全正确的。 以防万一你不喜欢使用setTimeout ，你可以使用requestAnimationFrame （ 见支持 ），当然你仍然感兴趣。
在下面的例子中，body得到一个额外的事件大小变化。 每当身体的高度或宽度发生改变时，都会触发。
(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函数，代码可以减less很多。 因此，只需删除完整的函数trigger并replace行trigger(document.body, 'sizechange'); 例如在jQuery $(document.body).trigger('sizechange'); 。
watch（）命令检查属性中的任何更改。
看到这个链接： 如何检测你的网页的高度变化？
