Sonja Demount: Javascript - Funktion ruft neues <Script auf geht das?

Hallo,

ich habe die Aufgabe einen Fallback für eine unsere JS Funktionen zu entwickeln. Ich bin jetzt auch so weit, das eine Funktion aufgerufen wird falls irgendetwas nicht stimmt. ( function sc_fail )

Jetzt habe ich vom Kollegen der natürlich soeben in Elternzeit gegangen ist nur einen Tag bekommen:

<script src="//a.testurl.com/page/74/tag" async="true"></script>

ich kann ja nicht einfach:

function sc_fail() {
    src="//a.testurl.com/page/74/tag" async="true"
};

einstellen. Das wird sicher wieder in irgendeinem Browser nicht laufen. Was meint Ihr?

  1. du kannst ein neues <script>-Tag erstellen und das ans DOM anhängen.

    1. Sorry aber das habe ich noch nicht gemacht, wie würde man das umsetzen?

      1. Hey,

        Ein Element dem DOM hinzufügen geht recht einfach.

        Aber was möchtest du genau erreichen, ich verstehe schon die Frage nicht wirklich.

        Gruß
        Jo

        1. Hallo,

          eigentlich ganz einfach. Ich habe ein JS Script das im Fehlerfall (z.B. externe Rescourchen nicht verfügbar) eine "Fehlerfunktion" aufruft die "sc_fail".

          In dieser Fehlerfunktion soll dann (im Fehlerfall) das Script meines Kollegen ( <script src="//a.testurl.com/page/74/tag" async="true"></script> ) ausgeführt werden.

          Nur ich weiß nicht wie ich das aufrufen soll?!

      2. Servus!

        Genauso wie hier beschrieben:

        Ein neues Element mit createElement erzeugen …

        … und dann mit appendChild ins DOM einhängen, das externe Script lädt dann automatisch.

        Eine Google-Suche bringt viele Ergebnisse.

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
      3. Hallo,

        zum dynamischen Nachladen von Javascripten benutze ich folgende Funktion:

        LoadScript = function(url,callback) {
        	var scr = document.createElement('script');
        	scr.type = "text/javascript";
        	scr.async = "async";
        	if(typeof(callback)=="function") {
        		scr.onloadDone = false;
        		scr.onload = function() { 
        			if ( !scr.onloadDone ) {
        				scr.onloadDone = true;
        				callback(); 
        			}
        		};
        		scr.onreadystatechange = function() { 
        			if ( ( "loaded" === scr.readyState || "complete" === scr.readyState ) && !scr.onloadDone ) {
        				scr.onloadDone = true; 
        				callback();
        			}
        		}
        	}
        	scr.onerror = function() {
        		console.log(url,"Konnte nicht geladen werden.");
        	}
        	scr.src = url;
        	document.getElementsByTagName('head')[0].appendChild(scr);
        } // LoadScript
        

        url ist Adresse des Scriptes, callback die Funktion, die nach dem Laden aufgerufen wird. Beachte, dass das Nachladen asyncron erfolgt. Schau es dir mal an und frag, wenn du etwas nicht verstehst.

        Gruß
        Jürgen

      4. Die Antwort heißt eigentlich: Kommt drauf an. Ich habe den Eindruck, dass ein "Tag" bei euch ein Jargon-Begriff ist. Verbirgt sich hinter der URL tatsächlich eine Javascript-Datei? Ich nehme erstmal an, dass das so ist...

        Wenn das Script deines Kollegen eine platte JS Datei ist, d.h. sein Code NICHT in eine Funktion eingekapselt ist, dann musst Du es so machen wie beschrieben. Script-Tag erzeugen, ins DOM hängen, etwas warten und hoffen. Sobald der Browser das Script downgeloaded hat, führt er es aus.

        Aber wenn dein Kollege eine Funktionensammlung geschaffen hat, wird die Sache viel einfacher. Zumindest dann, wenn das Script klein und handlich ist und keine langen Ladezeiten hat. Du kannst dann nämlich sein Script blindlings im <head> mit laden und in deiner Fail-Funktion seine Einstiegsfunktion aufrufen. Er müsste Dir für diesen Fall natürlich verraten haben, wie die Einstiegsfunktion heißt...

        Und wenn's doch eine plattes Script ist, dann würde ich es mir an Deiner Stelle mal angucken. Matscht es im globalen Scope herum? Kann man es ggf. nachträglich in einer Funktion verkapseln? Aus meiner Sicht wäre es gute Praxis, wenn man in einer Webanwendung nur ein Script hat, dass direkt Wirkung entfaltet. Der Rest sollten Funktionssammlungen oder Moduldefinitionen sein, die weitestgehend die Fingerchen vom globalen Scope lassen.

        Rolf

        1. Servus!

          Und wenn's doch eine plattes Script ist, dann würde ich es mir an Deiner Stelle mal angucken. Matscht es im globalen Scope herum? Kann man es ggf. nachträglich in einer Funktion verkapseln?

          Stimmt, da hab ich zu sehr auf die Frage geachtet, als darauf wie man es in einer Best Practice implementiert.

          Aus meiner Sicht wäre es gute Praxis, wenn man in einer Webanwendung nur ein Script hat, dass direkt Wirkung entfaltet. Der Rest sollten Funktionssammlungen oder Moduldefinitionen sein, die weitestgehend die Fingerchen vom globalen Scope lassen.

          An welcher Stelle im Wiki sollte man das den interessierten Lesern beibringen?

          Evtl. hier: JavaScript/Tutorials/Einbindung_in_HTML

          als Ergänzuung zu Kapitel 1.3 "JavaScript-Dateien in HTML referenzieren"

          Oder wo sonst?

          Herzliche Grüße

          Matthias Scharwies

          --
          Es gibt viel zu tun: ToDo-Liste
          1. Man sollte erstmal klären ob das eine rolf practice oder eine best practice ist :)

            1. Hallo Rolf,

              Man sollte erstmal klären ob das eine rolf practice oder eine best practice ist :)

              Tihi. Made my day.

              LG,
              CK

        2. @@Rolf b

          Matscht es im globalen Scope herum?

          Das wäre ein Grund, den Kollegen aus der Elternzeit zurückzubeordern.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        3. Tach!

          Wenn das Script deines Kollegen eine platte JS Datei ist, d.h. sein Code NICHT in eine Funktion eingekapselt ist, dann musst Du es so machen wie beschrieben. Script-Tag erzeugen, ins DOM hängen, etwas warten und hoffen. Sobald der Browser das Script downgeloaded hat, führt er es aus.

          Mich wundert auch, warum man ein Script einbindet, wenn ein Fehler aufgetreten ist. Was ist bei einem weiteren Fehler, falls das vorkommen kann? Und wie sieht der Code in der einzubindenden Datei aus? Das ganze Vorgehen sieht mir ziemlich ungewöhnlich aus. Was wäre denn auch großartiges in der Datei, das nicht von Anfang an ausgeliefert werden kann und nur im Fehlerfall aufgerufen wird?

          Und wenn's doch eine plattes Script ist, dann würde ich es mir an Deiner Stelle mal angucken. Matscht es im globalen Scope herum? Kann man es ggf. nachträglich in einer Funktion verkapseln? Aus meiner Sicht wäre es gute Praxis, wenn man in einer Webanwendung nur ein Script hat, dass direkt Wirkung entfaltet. Der Rest sollten Funktionssammlungen oder Moduldefinitionen sein, die weitestgehend die Fingerchen vom globalen Scope lassen.

          Naja, wenn mir das Haus gehört, warum soll ich nicht im Hausflur meine Schuhe und andere Gegenstände abstellen dürfen? Dass es Best Practice ist, wenn man auf Andere Rücksicht nehmen muss, ist verständlich. Aber was ist so toll an dem Prinzip, dass man es zum heiligen Dogma erklären muss? So kommt es mir zumindest gelegentlich vor. Was konkret spricht dagegen, dass das Script im globalen Scope hantiert? Ich wüsste die Antwort nicht, weil ich die konkreten Begleitumstände nicht kenne.

          dedlfix.

          1. Heiliges Dogma ist es nicht, aber die Gründe, warum man drauf achten sollte, lauten Modularisierung, Abstraktion und Entkoppelung. Wenn meine Webseite 100 Zeilen Javascript verwendet, kann man rummatschen wie man will. Sind es 10000, braucht es Disziplin. Sonst schreiben zwei Scripte die gleichen Variablen, benutzen gleiche Funktionsnamen (JA GUT, das sind letztlich gleiche Variablen), und es macht PENG.

            Bei mir im Haus stehen auch eine Menge Schuhe und anderer Kram. Zwei pubertierende Söhne machen das unvermeidlich. Und regelmäßig stolpere ich drüber. Oder jemand schmeißt seine Jacke über meine. Und ich suche dann rum. Da will ich wenigstens meinen Code ordentlich haben :)

            Rolf