it-swarm.com.de

Wie kann ich einen Fenstergrößenänderungs-Ereignis-Listener in JavaScript anhängen?

Ich erstelle ein JS/PHP-Plugin für die Distribution. Ich möchte, dass die Installation so einfach ist:

<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>

Ich möchte jedoch, dass dieses Plugin einen Listener zum Ändern der Fenstergröße anfügt ohne Überschreiben von window.onresize, Falls es andere Skripte gibt, die ebenfalls die Verwendung dieser Methode erfordern. Gibt es einen Javascript-Befehl wie document.addEventListener("resize", myResizeMethod, true);? Ich weiß, dass dies nicht der Fall ist, da dies nicht funktioniert und MDN und W3C sehr vage sind, welche Argumente addEventListener annehmen .

Ich möchte keine Antwort, die mich auffordert, window.onresize = myResizeMethod Oder <BODY ONRESIZE="myResizeMethod"> Zu verwenden, da diese nicht so Plug-in-freundlich sind.

26
Supuhstar

Da Sie versuchen, diese Funktion bei der Größenänderung des Fensters aufzurufen, möchten Sie die Funktion an das Fenster und nicht an das Dokument binden. Um Versionen von IE, die kleiner als 9 sind, zu unterstützen, sollten Sie attachEvent verwenden. Beachten Sie, dass Sie bei attachEvent das on Schlüsselwort. Hier ist ein Beispiel:

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
}

Ebenso können Sie Ereignisse auf dieselbe Weise entfernen

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

Sie ändern nicht die Größe des Dokuments, sondern des Fensters. Das funktioniert :

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