Comment activer la fenêtre redimensionner en JavaScript?
j'ai enregistré un déclencheur sur la fenêtre redimensionner. Je veux savoir comment je peux déclencher l'événement à appeler. Par exemple, quand cache un div, je veux que ma fonction de déclenchement soit appelée.
j'ai trouvé window.resizeTo() peut déclencher la fonction, mais est-il une autre solution?
8 réponses
dans la mesure du possible, je préfère appeler la fonction plutôt que d'envoyer un événement. Cela fonctionne bien si vous avez le contrôle sur le code que vous voulez exécuter, mais voir ci-dessous pour les cas où vous ne possédez pas le code.
window.onresize = doALoadOfStuff;
function doALoadOfStuff() {
//do a load of stuff
}
dans cet exemple, vous pouvez appeler la fonction doALoadOfStuff sans envoyer d'événement.
dans vos navigateurs modernes, vous pouvez déclencher l'événement en utilisant:
window.dispatchEvent(new Event('resize'));
Cela ne fonctionne pas dans Internet Explorer, où vous devrez faire la Manche longue:
var resizeEvent = window.document.createEvent('UIEvents');
resizeEvent .initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(resizeEvent);
jQuery a la trigger méthode , qui fonctionne comme ceci:
$(window).trigger('resize');
et a la mise en garde:
bien que .trigger () simule une activation d'événement, complète avec un objet d'événement synthétisé, elle ne reproduit pas parfaitement un événement naturel.
vous pouvez également simuler des événements sur un élément spécifique...
function simulateClick(id) {
var event = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true
});
var elem = document.getElementById(id);
return elem.dispatchEvent(event);
}
avec jQuery, vous pouvez essayer d'appeler déclencheur :
$(window).trigger('resize');
Une pure JS qui fonctionne aussi sur IE (à partir de @Manfred commentaire )
var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
ou pour angulaire:
$timeout(function() {
var evt = $window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, $window, 0);
$window.dispatchEvent(evt);
});
combinant les réponses de pomber et avetisk pour couvrir tous les navigateurs et ne pas causer d'Avertissements:
if (typeof(Event) === 'function') {
// modern browsers
window.dispatchEvent(new Event('resize'));
} else {
// for IE and other old browsers
// causes deprecation warning on modern browsers
var evt = window.document.createEvent('UIEvents');
evt.initUIEvent('resize', true, false, window, 0);
window.dispatchEvent(evt);
}
Je n'ai pas été en mesure de faire fonctionner cette solution avec l'une des solutions ci-dessus. Une fois que j'ai relié l'événement avec jQuery puis il a fonctionné très bien comme ci-dessous:
$(window).bind('resize', function () {
resizeElements();
}).trigger('resize');
juste
$(window).resize();
est ce que j'utilise... à moins que je ne comprenne mal ce que vous demandez.
window.resizeBy() déclenchera l'événement onresize de window. Cela fonctionne dans les deux Javascript ou VBScript .
window.resizeBy(xDelta, yDelta) appelé comme window.resizeBy(-200, -200) pour rétrécir la page 200px par 200px.