Evento di ridimensionamento della finestra JavaScript
-
22-07-2019 - |
Domanda
Come posso collegarmi a un evento di ridimensionamento della finestra del browser?
C'è un modo jQuery di ascoltare eventi di ridimensionamento ma io preferirei non inserirlo nel mio progetto solo per questo requisito.
Soluzione
jQuery sta semplicemente eseguendo il wrapping dell'evento DOM resize
standard, ad es.
window.onresize = function(event) {
...
};
jQuery potrebbe fare un po 'di lavoro per garantire che l'evento di ridimensionamento venga attivato in modo coerente in tutti i browser, ma non sono sicuro che qualcuno dei browser differisca, ma ti incoraggio a provare Firefox, Safari e IE.
Altri suggerimenti
Non sovrascrivere mai la funzione window.onresize.
Invece, crea una funzione per aggiungere un Listener di eventi all'oggetto o all'elemento. Questo verifica e incase che gli ascoltatori non funzionano, quindi sovrascrive la funzione dell'oggetto come ultima risorsa. Questo è il metodo preferito utilizzato in librerie come jQuery.
oggetto
: l'elemento o l'oggetto finestra
type
: ridimensiona, scorri (tipo di evento)
callback
: il riferimento della funzione
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;
}
};
Quindi usare è così:
addEvent(window, "resize", function_reference);
o con una funzione anonima:
addEvent(window, "resize", function(event) {
console.log('resized');
});
Prima di tutto, so che il metodo addEventListener
è stato menzionato nei commenti sopra, ma non ho visto alcun codice. Poiché è l'approccio preferito, eccolo qui:
window.addEventListener('resize', function(event){
// do stuff here
});
L'evento di ridimensionamento non dovrebbe mai essere usato direttamente poiché viene generato continuamente mentre ridimensioniamo.
Utilizzare una funzione di debounce per mitigare le chiamate in eccesso.
window.addEventListener ('resize', debounce (handler, delay, immediate), false);
Ecco un rimbalzo comune che fluttua intorno alla rete, anche se cerca quelli più avanzati come 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);
};
};
Questo può essere usato così ...
window.addEventListener('resize', debounce(() => console.log('hello'),
200, false), false);
Non sparerà mai più di una volta ogni 200 ms.
Per le modifiche all'orientamento mobile utilizzare:
window.addEventListener('orientationchange', () => console.log('hello'), false);
Ecco una piccola biblioteca che ho messo insieme per occuparmi di questo ordinatamente.
Credo che la risposta corretta sia già stata fornita da @Alex V, eppure la risposta richiede un po 'di modernizzazione poiché ha ormai più di cinque anni.
Esistono due problemi principali:
-
Non usare mai
oggetto
come nome di parametro. È una parola riservata. Detto questo, la funzione fornita da @Alex V non funzionerà inmodalità rigorosa
. -
La funzione
addEvent
fornita da @Alex V non restituisceoggetto evento
se viene utilizzato il metodoaddEventListener
. Un altro parametro dovrebbe essere aggiunto alla funzioneaddEvent
per consentire ciò.
NOTA: il nuovo parametro su addEvent
è stato reso facoltativo in modo che la migrazione a questa nuova versione della funzione non interrompa le chiamate precedenti a questa funzione. Saranno supportati tutti gli usi legacy.
Ecco la funzione addEvent
aggiornata con queste modifiche:
/*
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;
};
Un esempio di chiamata alla nuova funzione 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);
Grazie per aver fatto riferimento al mio post sul blog all'indirizzo http :. //mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
Mentre puoi semplicemente collegarti all'evento standard di ridimensionamento della finestra, scoprirai che in IE, l'evento viene generato una volta per ogni X e una volta per ogni movimento dell'asse Y, risultando in una tonnellata di eventi che potrebbero essere generati influire sul rendimento del tuo sito se il rendering è un'attività intensiva.
Il mio metodo prevede un breve timeout che viene annullato su eventi successivi in ??modo che l'evento non venga confuso con il codice fino a quando l'utente non ha terminato il ridimensionamento della finestra.
Soluzione per il 2018+:
Devi utilizzare ResizeObserver . Sarà una soluzione nativa del browser con prestazioni molto migliori rispetto all'utilizzo dell'evento ridimensionare
. Inoltre, supporta non solo l'evento sul documento
ma anche su elementi
arbitrari
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);
Attualmente, solo Chrome lo supporta, ma probabilmente seguiranno altri browser (presto). Per ora devi usare un polyfill .
window.onresize = function() {
// your code
};
Il seguente post sul blog può esserti utile: Correzione dell'evento di ridimensionamento della finestra in Internet Explorer
Fornisce questo codice:
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); }
Le soluzioni già menzionate sopra funzioneranno se tutto ciò che vuoi fare è ridimensionare solo la finestra e la finestra. Tuttavia, se si desidera che il ridimensionamento sia propagato agli elementi figlio, è necessario propagare l'evento da soli. Ecco un esempio di codice per farlo:
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);
});
Nota che un elemento figlio può chiamare
event.preventDefault();
sull'oggetto evento che viene passato come primo Arg dell'evento di ridimensionamento. Ad esempio:
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>