web-dev-qa-db-fra.com

Comment puis-je attacher un écouteur d'événement de redimensionnement de fenêtre en JavaScript?

Je fais un plugin JS/PHP pour la distribution. Je veux que ce soit aussi facile à installer que ceci:

<HTML>
<HEAD>
<TITLE>Testing my Plugin</TITLE>
<?php
  include 'path/to/myPlugin.php';
  echo getMyPluginHeadContent();
?>
</HEAD>
<BODY>
<?php
  echo getMyPluginContent("Arguments will go here");
?>
</BODY>
</HTML>

Cependant, je veux que ce plugin attache un écouteur de redimensionnement de fenêtre sans écrasant window.onresize, Au cas où il y aurait d'autres scripts qui nécessitent également l'utilisation de cette méthode. Existe-t-il une commande javascript comme document.addEventListener("resize", myResizeMethod, true);? Je sais que ce n'est pas ça, car cela ne fonctionne pas, et le MDN et le W3C sont très vagues sur les arguments que addEventListener prend .

Je ne veux pas de réponse me disant d'utiliser window.onresize = myResizeMethod Ou <BODY ONRESIZE="myResizeMethod">, Car ils ne sont pas aussi compatibles avec les plugins.

javascriptplugins
26
Supuhstar

Puisque vous essayez d'appeler cette fonction lors du redimensionnement de la fenêtre, vous souhaiterez lier la fonction à la fenêtre et non au document. Pour prendre en charge les versions de IE inférieures à 9, vous souhaiterez utiliser attachEvent. Veuillez noter que attachEvent vous oblige à spécifier le on mot clé. Voici un exemple:

if(window.attachEvent) {
    window.attachEvent('onresize', function() {
        alert('attachEvent - resize');
    });
}
else if(window.addEventListener) {
    window.addEventListener('resize', function() {
        console.log('addEventListener - resize');
    }, true);
}
else {
    //The browser does not support Javascript event binding
}

De même, vous pouvez supprimer des événements de la même manière

if(window.detachEvent) {
    window.detachEvent('onresize', theFunction);
}
else if(window.removeEventListener) {
    window.removeEventListener('resize', theFunction);
}
else {
    //The browser does not support Javascript event binding
}
58
Kyle

Vous ne redimensionnez pas le document mais la fenêtre. Cela marche :

window.addEventListener("resize", function(){console.log('resize!')}, true);
21
Denys Séguret