¿Es posible actualizar una página en el cambio de tamaño del navegador? Utilizo algunos estilos que crean áreas en una página y si el navegador se reduce a escala el diseño se rompe.¿Cómo puedo actualizar la pantalla en el tamaño del navegador?
¿Puedo detectar el cambio del tamaño del documento con jQuery?
Actualización para cualquier persona que vea esto ahora. JQuery ahora considera que bind es una función obsoleta.
Y la forma en que funciona la respuesta de proximus (al menos en Opera/Chrome/Firefox) constantemente sondea para cambiar el tamaño, incluso si el navegador está sentado allí. Parece que se llamó automáticamente a la función de cambio de tamaño cuando tocó location.reload(), haciendo que tocara un bucle infinito. Esto es lo que hice que también resolvió el problema.
jQuery(function($){
var windowWidth = $(window).width();
var windowHeight = $(window).height();
$(window).resize(function() {
if(windowWidth != $(window).width() || windowHeight != $(window).height()) {
location.reload();
return;
}
});
});
Hay un evento onresize se pueden detectar:
Si usted está buscando una solución jQuery, se puede usar algo como esto:
$(window).bind('resize', function() {
location.reload();
});
tal vez tenga sentido para, además, utilizar un tiempo de espera ...
En este caso, realmente no importa porque solo volverá a cargar la página la primera vez que se llame el cambio de tamaño.Use un tiempo de espera cuando en realidad está ejecutando código en el cambio de tamaño que podría repetirse cientos de veces por WebKit o IE, que dispara mucho ese evento mientras se cambia el tamaño de la ventana. – RwwL
Aquí hay una solución JS pura, porque creo que no es justo usar jQuery para todo.
window.addEventListener('resize', function() {
"use strict";
window.location.reload();
});
Un inconveniente es que no va a funcionar en el "navegador" Internet Explorer 9. mayores de
+1 por no jQuery – user2240431
sólo tiene que utilizar el código
$(window).resize(function() {
window.location.href = window.location.href;
});
espero que útil
$(window).resize(function() {
window.location.href = window.location.href;
});
¡Esto funcionó para mí!
Existe un problema si alguien arrastra la ventana para cambiar el tamaño: habrá demasiados eventos de cambio de tamaño.
Es mejor utilizar el temporizador, que limpiar eso:
$(window).on('resize', function() {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function() {
location.reload();
}, 500);
});
simple. Esto no activa múltiples eventos solo un evento cada x segundo (s). La respuesta aceptada tirará demasiados eventos
var resizeTimeout;
window.addEventListener('resize', function(event) {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function(){
window.location.reload();
}, 1500);
});
para jQuery reemplazar window.addEventListener('resize' con $(window).resize
magia de jQuery ..., o tal vez con un evento DOM? – Jan
Cuando dice "si el navegador está reducido", ¿quiere decir que el usuario cambia el tamaño de la ventana del navegador O que el usuario se aleja (Ctrl o Cmd)? Situaciones totalmente diferentes. – RwwL
#check mi respuesta: Es perfecto y probado: http://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery/17059269#17059269 –