Evento de cambio de tamaño de la ventana de JavaScript
-
22-07-2019 - |
Pregunta
¿Cómo puedo conectarme a un evento de cambio de tamaño de la ventana del navegador?
Hay una forma jQuery de escuchar eventos de cambio de tamaño pero yo preferiría no incluirlo en mi proyecto solo por este requisito.
Solución
jQuery simplemente está envolviendo el evento DOM resize
estándar, por ejemplo.
window.onresize = function(event) {
...
};
jQuery puede hacer un trabajo para garantizar que el evento de cambio de tamaño se active de forma coherente en todos los navegadores, pero no estoy seguro de si alguno de los navegadores difiere, pero le animo a que pruebe Firefox, Safari e IE.
Otros consejos
Nunca anule la función window.onresize.
En su lugar, cree una función para agregar un escucha de eventos al objeto o elemento. Esto comprueba y en caso de que los oyentes no funcionen, luego anula la función del objeto como último recurso. Este es el método preferido utilizado en bibliotecas como jQuery.
object
: el elemento u objeto de ventana
type
: redimensionar, desplazarse (tipo de evento)
callback
: la referencia de función
var addEvent = function(object, type, callback) {
if (object == null || typeof(object) == 'undefined') return;
if (object.addEventListener) {
object.addEventListener(type, callback, false);
} else if (object.attachEvent) {
object.attachEvent("on" + type, callback);
} else {
object["on"+type] = callback;
}
};
Entonces el uso es así:
addEvent(window, "resize", function_reference);
o con una función anónima:
addEvent(window, "resize", function(event) {
console.log('resized');
});
En primer lugar, sé que el método addEventListener
se ha mencionado en los comentarios anteriores, pero no vi ningún código. Dado que es el enfoque preferido, aquí está:
window.addEventListener('resize', function(event){
// do stuff here
});
El evento de cambio de tamaño nunca debe usarse directamente, ya que se activa continuamente a medida que cambiamos el tamaño.
Use una función antirrebote para mitigar el exceso de llamadas.
window.addEventListener ('cambiar tamaño', debounce (manejador, retraso, inmediato), falso);
Aquí hay un rebote común que flota alrededor de la red, aunque busca otros más avanzados como featuerd in lodash.
const debounce = (func, wait, immediate) => {
var timeout;
return () => {
const context = this, args = arguments;
const later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
Esto se puede usar así ...
window.addEventListener('resize', debounce(() => console.log('hello'),
200, false), false);
Nunca disparará más de una vez cada 200 ms.
Para cambios de orientación móvil, use:
window.addEventListener('orientationchange', () => console.log('hello'), false);
Aquí hay una pequeña biblioteca que reuní para ocuparme de esto perfectamente.
Creo que @Alex V ya proporcionó la respuesta correcta, pero la respuesta requiere cierta modernización ya que tiene más de cinco años.
Hay dos problemas principales:
-
Nunca use
object
como nombre de parámetro. Es una palabra reservada. Dicho esto, la función proporcionada por @Alex V no funcionará enmodo estricto
. -
La función
addEvent
proporcionada por @Alex V no devuelve elobjeto de evento
si se usa el métodoaddEventListener
. Se debe agregar otro parámetro a la funciónaddEvent
para permitir esto.
NOTA: El nuevo parámetro para addEvent
se ha hecho opcional para que la migración a esta nueva versión de función no interrumpa ninguna llamada previa a esta función. Todos los usos heredados serán compatibles.
Aquí está la función actualizada addEvent
con estos cambios:
/*
function: addEvent
@param: obj (Object)(Required)
- The object which you wish
to attach your event to.
@param: type (String)(Required)
- The type of event you
wish to establish.
@param: callback (Function)(Required)
- The method you wish
to be called by your
event listener.
@param: eventReturn (Boolean)(Optional)
- Whether you want the
event object returned
to your callback method.
*/
var addEvent = function(obj, type, callback, eventReturn)
{
if(obj == null || typeof obj === 'undefined')
return;
if(obj.addEventListener)
obj.addEventListener(type, callback, eventReturn ? true : false);
else if(obj.attachEvent)
obj.attachEvent("on" + type, callback);
else
obj["on" + type] = callback;
};
Una llamada de ejemplo a la nueva función addEvent
:
var watch = function(evt)
{
/*
Older browser versions may return evt.srcElement
Newer browser versions should return evt.currentTarget
*/
var dimensions = {
height: (evt.srcElement || evt.currentTarget).innerHeight,
width: (evt.srcElement || evt.currentTarget).innerWidth
};
};
addEvent(window, 'resize', watch, true);
Gracias por hacer referencia a mi publicación de blog en http : //mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html .
Si bien puede conectarse al evento de cambio de tamaño de ventana estándar, encontrará que en IE, el evento se dispara una vez por cada X y una vez por cada movimiento del eje Y, lo que resulta en una tonelada de eventos que podrían dispararse, lo que podría tener un impacto en el rendimiento de su sitio si la representación es una tarea intensiva.
Mi método implica un breve tiempo de espera que se cancela en los eventos posteriores para que el evento no aparezca en su código hasta que el usuario haya terminado de cambiar el tamaño de la ventana.
Solución para 2018+:
Debe usar ResizeObserver . Será una solución nativa del navegador que tiene un rendimiento mucho mejor que usar el evento resize
. Además, no solo admite el evento en el documento
sino también en los elementos arbitrarios de
.
var ro = new ResizeObserver( entries => { for (let entry of entries) { const cr = entry.contentRect; console.log('Element:', entry.target); console.log(`Element size: ${cr.width}px x ${cr.height}px`); console.log(`Element padding: ${cr.top}px ; ${cr.left}px`); } }); // Observe one or multiple elements ro.observe(someElement);
Actualmente, solo Chrome lo admite, pero es probable que otros navegadores lo sigan (pronto). Por ahora debe usar un polyfill .
window.onresize = function() {
// your code
};
La siguiente publicación de blog puede serle útil: Arreglando el evento de cambio de tamaño de ventana en IE
Proporciona este código:
Sys.Application.add_load(function(sender, args) { $addHandler(window, 'resize', window_resize); }); var resizeTimeoutId; function window_resize(e) { window.clearTimeout(resizeTimeoutId); resizeTimeoutId = window.setTimeout('doResizeCode();', 10); }
Las soluciones mencionadas anteriormente funcionarán si todo lo que quiere hacer es cambiar el tamaño de la ventana y solo la ventana. Sin embargo, si desea que el cambio de tamaño se propague a elementos secundarios, deberá propagar el evento usted mismo. Aquí hay un código de ejemplo para hacerlo:
window.addEventListener("resize", function () {
var recResizeElement = function (root) {
Array.prototype.forEach.call(root.childNodes, function (el) {
var resizeEvent = document.createEvent("HTMLEvents");
resizeEvent.initEvent("resize", false, true);
var propagate = el.dispatchEvent(resizeEvent);
if (propagate)
recResizeElement(el);
});
};
recResizeElement(document.body);
});
Tenga en cuenta que un elemento hijo puede llamar
event.preventDefault();
en el objeto de evento que se pasa como el primer Arg del evento de cambio de tamaño. Por ejemplo:
var child1 = document.getElementById("child1");
child1.addEventListener("resize", function (event) {
...
event.preventDefault();
});
var EM = new events_managment();
EM.addEvent(window, 'resize', function(win,doc, event_){
console.log('resized');
//EM.removeEvent(win,doc, event_);
});
function events_managment(){
this.events = {};
this.addEvent = function(node, event_, func){
if(node.addEventListener){
if(event_ in this.events){
node.addEventListener(event_, function(){
func(node, event_);
this.events[event_](win_doc, event_);
}, true);
}else{
node.addEventListener(event_, function(){
func(node, event_);
}, true);
}
this.events[event_] = func;
}else if(node.attachEvent){
var ie_event = 'on' + event_;
if(ie_event in this.events){
node.attachEvent(ie_event, function(){
func(node, ie_event);
this.events[ie_event]();
});
}else{
node.attachEvent(ie_event, function(){
func(node, ie_event);
});
}
this.events[ie_event] = func;
}
}
this.removeEvent = function(node, event_){
if(node.removeEventListener){
node.removeEventListener(event_, this.events[event_], true);
this.events[event_] = null;
delete this.events[event_];
}else if(node.detachEvent){
node.detachEvent(event_, this.events[event_]);
this.events[event_] = null;
delete this.events[event_];
}
}
}
<script language="javascript">
window.onresize = function() {
document.getElementById('ctl00_ContentPlaceHolder1_Accordion1').style.height = '100%';
}
</script>