javascript - ejemplo - Detecta el cambio de altura del documento
javascript descargar (6)
Como se menciona en vsync, no hay ningún evento, pero puede usar un temporizador o adjuntar el controlador en otro lugar:
// 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);
Encuentra el jsfiddle aquí .
Intento detectar cuándo cambia la altura de mi document . Una vez que lo haga, necesito ejecutar algunas funciones para ayudar a organizar el diseño de mi página.
No estoy buscando window.onresize . Necesito el documento completo, que es más grande que la ventana.
¿Cómo observo este cambio?
El comando watch () verifica cualquier cambio en una propiedad.
Vea este enlace: ¿Cómo detectar cuándo cambia el alto de su página?
La respuesta de vsync está completamente bien. En caso de que no le guste usar setTimeout , puede usar requestAnimationFrame ( ver soporte ) y, por supuesto, sigue interesado.
En el siguiente ejemplo, el cuerpo obtiene un cambio de sizechange evento sizechange . Y cada vez que cambia la altura o el ancho del cuerpo, se activa.
(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);
})();
El código se puede reducir mucho si tiene una función propia triggerEvent en su proyecto. Por lo tanto, simplemente elimine el trigger función completo y reemplace el trigger(document.body, ''sizechange''); línea trigger(document.body, ''sizechange''); con, por ejemplo, en jQuery $(document.body).trigger(''sizechange''); .
Puede usar un iframe posición absolute con ancho cero dentro del elemento que desea monitorear para los cambios de altura, y escuchar el cambio de resize eventos en su contentWindow . Por ejemplo:
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 (usando jQuery pero podría adaptarse a JS puro)
$(''.height-change-listener'').each(function() {
$(this.contentWindow).resize(function() {
// Do something more useful
console.log(''doc height is '' + $(document).height());
});
});
Si por alguna razón tienes height:100% establecido en el body necesitarás encontrar (o agregar) otro elemento contenedor para implementar esto. Si desea agregar el iframe dinámicamente, probablemente necesite usar el evento <iframe>.load para adjuntar el listener contentWindow.resize . Si quieres que esto funcione en IE7 y en los navegadores, necesitarás agregar *zoom:1 hack al elemento contenedor y también escuchar el evento de cambio de resize ''propietario'' en el elemento <iframe> mismo (que duplicará contentWindow.resize en IE8-10).
Solo mis dos centavos. Si por casualidad usa angular, esto haría el trabajo:
$scope.$watch(function(){
return document.height();
},function onHeightChange(newValue, oldValue){
...
});
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'');
});