Include Javascript Datei in Head vor allen anderen Elementen

[pumi]

Hallo,

ich habe eine Includefunktion, die mir in den Head einen Scripteintrag erzeugt:

function require(jsFile) {
  var d = this.window.document;
	
  var js = d.createElement('script');
  js.setAttribute("type", "text/javascript");
  js.setAttribute("src", jsFile);

  //d.getElementsByTagName("head")[0].appendChild(js);
	
  d.getElementsByTagName('head')[0].insertBefore(js, d.getElementsByTagName('head').firstChild);	
}

Obwohl ich mit insertBefore einfüge, wird der Eintrag immer am Schluss von head erstellt.
Kann mir jemand sagen warum? Was mache ich falsch?

Vielen Dank und Grüße pumi

 

[mikdoe]

Ich meine, ich hätte vor einiger Zeit auch mal sowas gehabt. Bekam es mit JS einfach nicht hin, hab es dann mit jQuery's .prepend() gelöst. Ich weiß aber nicht mehr wo das war, warum jQuery das hinbekommen hat und ich nicht und ob es da um head oder body ging.

 

[tsseh]

wie/wo rufst du das denn auf?
und was versprichst du dir davon? wo das script im dom eingefügt wird ist eigentlich nebensächlich, warum interessiert dich das?

 

[pumi]

Danke für die Antworten.
@mikdoe: jQuery kann ich in diesem Fall nicht verwenden, weil ich mit der
Funktion jQuery includen möchte.

@hesst: Ich habe eine Javascriptdatei, die jQuery benötigt.
Mit der require-Funktion binde ich jQuery ein.
Ich mache das deshalb, damit man nicht vergessen kann,
jQuery einzubinden.
In das html-Dokument binde ich dann nur noch meine Javascript-Datei ein.
Da die require-Funktion aber jQuery nach meiner eigenen Scriptdatei einbindet,
funktionieren die Funktionen nicht, weil jQuery noch unbekannt ist.

Viele Grüße pumi

 

[tsseh]

also meinst du auch nicht die position im dom, die vermutlich stimmt, sondern die zeitliche reihenfolge.
ja, wenn du in deinem script auf jquery zugreifst und in diesem script am anfang deine funktion zum nachladen von jquery nutzt, läuft dein script (mindestens) vollständig durch, bis das jquery script an die reihe kommt.
das benötigt aber auch zeit zum laden, du hast ja erst mal nur den dom-knoten erstellt, vom server muss es ja auch erst mal (asynchron) geladen werden. also kann es sein, das auch das nächste script vollständig durch läuft. solange bis das über deine funktion nachgeladene script geladen wurde.
du hast jetzt folgende möglichkeiten:
document.write synchronisiert. du kannst also die scriptnode mit document.write einfügen. dann wird das script geladen und erst dann mit der abarbeitung weitergemacht.
eine scriptnode hat je nach browser verschiedene eventhandler die das "fertiggeladen" anzeigen(onload, onredystatechanged). du kannst die abarbeitung deines codes in den eventhandler verschieben
du nimmst eine fertige lösung

 

[pumi]

@hesst: Es geht rein um die Position im Dom. Die zeitliche Reihenfolge ist sicherlich auch beachtenswert,
aber nicht das Problem.
Die fertige Lösung ist mir meine Zwecke etwas überdimensioniert, aber vielleicht kann ich mir da etwas abschauen.
Komisch ist das mit der Reihenfolge aber schon...
Vielleicht mach ich mal einen Versuchsaufbau und stelle es hier ein.

Grüße pumi

 

[tsseh]

@hesst: Es geht rein um die Position im Dom. Die zeitliche Reihenfolge ist sicherlich auch beachtenswert,
aber nicht das Problem.

und da wieder die frage, warum interessiert dich die überhaupt?
außerdem behaupte ich noch immer, die position im dom wird schon stimmen. würde mich wundern, wenn die nicht stimmt.

 

[pumi]

danke für deine Antwort.

und da wieder die frage, warum interessiert dich die überhaupt?
außerdem behaupte ich noch immer, die position im dom wird schon stimmen. würde mich wundern, wenn die nicht stimmt.

Die Scripte sind voneinander abhängig, daher Script 1 muss eingebunden werden, vor Script 2.
Die Position im Dom stimmt definitiv nicht bei dieser Variante.
Ich habe nun eine Lösung gefunden, die funktioniert.:

function include(jsFile) {
    var js = document.createElement("script"),
        loaded = false;
    js.onload = js.onreadystatechange = function () {
        if ((js.readyState && js.readyState !== "complete" && js.readyState !== "loaded") || loaded) {
            return false;
        }
        js.onload = js.onreadystatechange = null;
        loaded = true;
        // done!
    };
    js.async = true;
    js.src = jsFile;
    var hhead = document.getElementsByTagName('head')[0];
    hhead.insertBefore(js, hhead.firstChild);
}

 

[tsseh]

Die Scripte sind voneinander abhängig, daher Script 1 muss eingebunden werden, vor Script 2.

ja, aber zeitlich und nicht als position im dom, die ist für scripte nur im statischen fall wichtig, damit sie beim laden der seite in der richtigen zeitlichen reihenfolge abgearbeitet werden. lädst du dynamisch ein script durch einfügen eines script-elementes hinzu, ist dessen position im dom überhaupt nicht relevant, das kannst du ans ende hängen. aber du musst sicher stellen, dass das script zeitlich vor allen anderen scripts geladen und abgearbeitet wurde, die von diesem abhängen.

Die Position im Dom stimmt definitiv nicht bei dieser Variante.

hab das gerade getestet, sie stimmt

Ich habe nun eine Lösung gefunden, die funktioniert.

nein, du arbeitest ja im eventhandler nicht dein abhängiges script ab, sondern gibst nur false zurück.