borisbaer: JS script sowohl bei dynamisch als auch statisch geladenem content ausführen

Beitrag lesen

problematische Seite

Hallo Rolf,

Du musst das aber nicht über den Observer steuern. Den Aufruf der Erstregistrierung kannst Du in einen DOMContentLoaded Eventhandler stecken. Und die Nachregistrierung rufst Du einfach "von Hand" auf, nachdem Du das Ergebnis des Ajax-Calls ins DOM gesteckt hast. Fertig.

ha! So einfach! Und ich doktor die ganze Zeit mit dem MutationObserver herum.

Das JavaScript-Modul dazu lädst Du einmalig beim Seitenabruf. Entweder klassisch im <head> mit DOMContentLoaded Event, oder Du notierst am script-Element das defer Attribut, dann wird das Script im Hintergrund geladen, aber erst ausgeführt, wenn das DOM bereit ist. Und zwar direkt vor dem DOMContentLoaded Event. Das kann sogar schon der IE10.

Jetzt habe ich wieder etwas gelernt. Ich kann also einfach mein script foo mit dem Befehl document.addEventListener('DOMContentLoaded', foo); aufrufen. Jeder weitere Aufruf ginge nun theoretisch auch mit einem MutationObserver, aber ich kann auch einfach foo(); am Ende des AJAX calls schreiben. Wenn man wollte könnte man das Ganze sicher auch so einrichten, dass foo(); nur dann aufgerufen wird, wenn auch ein bestimmter URL-Parameter angezeigt wird, damit das script nicht unnötig häufig aufgerufen wird.

Oder vielleicht besser direkt am Anfang des scripts ein if clause einfügen, das prüft, ob sich eine bestimmte bestimmte id oder class im DOM befindet, und ansonsten einfach return?

Geht ein MutationObserver eigentlich sehr auf die Performance? Oder spricht in der Hinsicht nichts dagegen?

Noch besser ist ein ES6-Modul (also <script type="module">). ES6-Module haben zwei Vorteile:

  • Sie werden automatisch mit defer ausgeführt. Kein DOMContentLoaded Event nötig
  • Sie werden automatisch gekapselt, d.h. du kannst nach Herzenslust "globale" Variablen und Funktionen erzeugen - sie bleiben im Modul.
  • Sie laufen automatisch im strict mode.

Der Nachteil war einmal: Der IE kann das nicht.

Der Nachteil ist aber auch: Alles, was im Modul steckt, ist gekapselt. Wenn Du Funktionen eines Modul von anderen Scripts aus nutzen willst, musst Du Dich mit export und import von ES6 Modulen beschäftigen. Das heißt auch: Ein Eventhandler in einem Modul ist mit onclick="..." nicht ansprechbar. Du musst alle Events mit addEventListener registrieren.

Das klingt ziemlich„advanced“. Ich kann wohl vorerst ohne JS-Module auskommen. Aber beizeiten schaue ich mir das auf jeden Fall an.

Vielen Dank, Rolf!