Rolf B: mit Javascript eine externe Script-Datei laden und ausführen

Beitrag lesen

problematische Seite

Hallo Linuchs,

document.getElementsByTagName("head")[0]

Du kannst auch document.head nehmen.

.append('<script src="..." integrity="..." crossorigin=""><\/script>');

Das kannst Du nicht nehmen. Append akzeptiert zwar auch Strings, parsed aber kein HTML. Wenn Du ein HTML Element hinzufügen willst, musst Du es mit document.createElement erzeugen und die Attribute im Script setzen. Oder Du verwendest jQuery, dem kannst Du einen HTML String übergeben und es parsed ihn.

Du solltest übrigens nicht leaflet-src.js laden, sondern leaflet.js, das ist die minifizierte Version. Die lädt schneller. Das Gleiche gilt für das markercluster Plugin, auch da gibt es eine minifizierte Version.

Zum Ablauf:

In dem Moment, wo Du ein Script-Element dem <head> hinzufügst, wird es geladen und danach ausgeführt.

Vermutlich falscher Ort, weil der "Render" dort schon vorbeigelaufen ist.

Deswegen: Diese Annahme ist falsch. Der Ort ist korrekt. Da Du das Hinzufügen erst dann startest, wenn dein DOM geladen ist, steht das DOM und eventuelle globale Werte deiner eigenen Scripte dem nachgeladenen Script vollständig zur Verfügung. "Geographisch" befindet sind das nachgeladene Script zwar vor dem DOM, das ist in diesem Fall aber irrelevant.

Aber auch in die "Zukunft" kann ich es nicht platzieren, weil "remso_map" zu diesem Zeitpunkt noch nicht bekannt ist.

Warum? Wenn das Laden durch einen Button ausgelöst wird, ist das DOM geladen und remso_map sollte existieren. Aber du solltest beim head bleiben. Die Platzierung dynamisch nachgeladener Scripte ist - soweit ich weiß - egal, und im head stehen sie alle schön beieinander.

Hinweis: Der Unterschied zwischen fest notierten Scripts und per document.head.append ist, dass die append-eten Scripts asynchron ausgeführt werden. Das ist dann relevant, wenn Du mehrere Scripte lädst und das zweite vom ersten abhängt. leaflet ist aber AMD-kompatibel, d.h. Du kannst JS Bibliotheken wie require.js einsetzen um dynamisch nachzuladen und die Abhängigkeiten zu beachten. Das macht die Sache sehr bequem (bis auf die Extra-Library, die Du einbinden und verstehen musst).

Wenn Du keine AMD Library verwenden willst, kannst Du die beiden Scripte zusammenkopieren und von deinem Server laden. Sie folgen beide dem Modulpattern, d.h. sie sind in eine IIFE gekapselt, deshalb geht das. Zuerst leaflet, dann leaflet_cluster. Dann musst Du nur ein Script laden.

Was nicht sicher funktioniert, ist, sich beim ersten Script-Element auf das load Event zu registrieren und im Eventhandler das Laden des zweiten Scripts anzustoßen. Dass load gefeuert wird, bedeutet nur, dass das Script geladen ist, nicht, dass es ausgeführt wurde. Es wird vermutlich funktionieren; ich kann es Dir aber nicht garantieren. Die sinnvollen Alternativen sind nach meiner Meinung ein AMD-Loader oder ein Bundle.

Ob die Modul-Syntax von JavaScript funktioniert, weiß ich nicht. Es gibt zwar eine Modulunterstützung bei Leaflet, aber sie schreiben da nur "node.js" drüber. Ich habe nicht ausprobiert, ob sie auch als ECMAScript-Module genutzt werden können-.

Rolf

--
sumpsi - posui - clusi