JavaScript in HTML-Seite nachladen und ausführen

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo,

ich komme einfach nicht weiter und hoffe sehr, dass ihr mir helfen könnt. Dabei scheine ich schon ganz nah vor der Lösung zu stehen, aber was ich auch mache, es will nicht funktionieren.

Ziel:
ich möchte das JS Framework jQuery in einer bereits geladenen HTML-Seite nachladen und für den weiteren Skriptverlauf verfügbar machen.

Ansätze:
ideal fänd ich, wenn es eine JavaScript Funktion gäbe, mit der man JavaScript Code von einer http-adresse laden und direkt ausführen könnte. Evtl. mit AJAX und eval?

Mein Ansatz war aber folgender:
ich erstellte ein script-HTML-Element, das ich nachträglich im head-Element verankerte. Allerdings scheint es nicht „gestartet“ zu werden. Erst wenn ich das Skript nochmals starte, wird es geladen und jQuery ist verfügbar.

Hier mal meine Code so weit:

javascript:
var prepare=function(){
alert("Callback: "+jquery)}

if (document.getElementById(‚jquery‘)) {
alert(„jQuery ist schon importiert“);
var jquery=document.getElementById(‚jquery‘);
} else {
var jquery=document.createElement(„script“);
jquery.type=„text/javascript“;
jquery.src=„js/jquery.js“;
jquery.id=„jquery“;
document.getElementsByTagName(‚head‘)[0].appendChild(jquery);
}
alert("jQuery Ergebnis: "+$(document));

Zur Erläuterung:

  • als erstes wird eine Funktion definiert, die nach Laden des script-Tags ausgeführt werden soll
  • wenn das jQuery-Scriptobjekt schon existiert, informiere den User und definiere nur seine Referenz
  • wenn das jQuery-Scriptobjekt nicht existiert, erzeuge ein neues Scriptobjekt, verknüpfe es mit Quelle, Typ, ID und callback und füge es dem head als neues Kind hinzu.

Die Callback-Funktion des onload wird gar nicht aufgerufen. Das unterste Alert liefert erst ‚null‘ und nach dem zweiten Start erst das Dokument-Objekt.

Wie kann ich jQuery schon im ersten Durchlauf nutzen?

Danke für eure Ideen!

VG,
Michael

#2

Hallo Michael,

javascript:
var prepare=function(){
alert("Callback: "+jquery)}

if (document.getElementById(‚jquery‘)) {
alert(„jQuery ist schon importiert“);
var jquery=document.getElementById(‚jquery‘);
} else {
var jquery=document.createElement(„script“);
jquery.type=„text/javascript“;
jquery.src=„js/jquery.js“;
jquery.id=„jquery“;

in der src-anweisung kannst du doch jede beliebe datei im web einbinden.

mittels javascript kannst an jeder stelle des html-dokumentes ein neues script-element erzeugen/einfügen.

falls das javascript auf elemente zugreifen soll, die noch nicht im body geladen sind, darfst du es erst danach erzeugen.

Ajax ist text-basierend, also nix mit javascript-code

was soll denn gemacht werden?

gruß
klaus

#3

hallo michael,
mir ist da noch was eingefallen,

jquery.type=„text/javascript“;
jquery.src=„js/jquery.js“;
jquery.id=„jquery“;

du kannst beim erzeugen des script-elementes mittels der onload-function eine function aufrufen, so wie beim body onload.

jquery.onload=nachladfunction;

und …
hatte AJAX gesehen - EVAL übersehen.
klar mit eval(responseText) geht es natürlich auch.

gruß
klaus

#4

Hallo Klaus,

vielen Dank für Deine schnelle Reaktion, ich habe heute nicht wirklich mit einer Antwort gerechnet. :smile:

Nun, ich bin nicht der JavaScript Experte und wollte den Weg des geringsten Widerstands gehen. Deshalb wollte ich jQuery verwenden, um „browserunabhängig“ AJAX-Abfragen durchzuführen.

Vielleicht liegt es schon an der späten Stunde, aber ich kann Deine Informationen nicht so ganz verarbeiten.

Gegeben ist eine Webseite. Mit Hilfe von JavaScript möchte ich einige Informationen der Seite auslesen, per AJAX an meinen Server schicken und die Rückgabedaten als Zusatzinfo in die Webseite einbinden.

Das Erzeugen und Einbinden des script-HTML-Objekts funktioniert so weit einwandfrei. Nur gibt das jQuery Konstrukt „$(document)“ beim ersten Durchgang nur „null“ zurück. Beim zweiten Ausführen desselben Skripts ist jQuery ja schon geladen, also bekomme ich die Info, dass es geladen ist und „$(document)“ gibt mir das jQuery Dokument-Objekt zurück.

Gibt es vielleicht eine JS Funktion, die ein JavaScript Dokument lädt und gleich ausführt? jQuery AJAX kann ich an der Stelle nicht verwenden, da ich ja jQuery laden will.

Danke nochmal für die Hilfe,

Michael

#5

Hallo Klaus,

ich freue mich, dass man sich so ausführlich mit den Problemen anderer auseinandersetzt. Also beide Daumen hoch für Dich und dieses Forum!!

mir ist da noch was eingefallen,

jquery.type=„text/javascript“;
jquery.src=„js/jquery.js“;
jquery.id=„jquery“;

du kannst beim erzeugen des script-elementes mittels der
onload-function eine function aufrufen, so wie beim body
onload.

jquery.onload=nachladfunction;

Ja, entschuldige die Verwirrung, ich habe die Callback-Funktion oben ja definiert, aber wie Du richtig feststelltest habe ich den Code nicht vollständig kopiert. Ich hatte das kurz rausgenommen, weil ich die Reaktion ohne Callback testen wollte. Der letzte Teil des Codes sieht eigentlich so aus:

„“"
var jquery=document.createElement(„script“);
jquery.type=„text/javascript“;
jquery.src=„js/jquery.js“;
jquery.id=„jquery“;
jquery.onload=„prepare()“;
document.getElementsByTagName(‚body‘)[0].appendChild(jquery);
}
„“"

Ich bekomme aber keine Ausgabe aus meinem Callback, weder beim ersten noch beim zweiten Durchlauf. Habe ich da etwas falsch geschrieben, oder wird das Objekt vielleicht gar nicht geladen? Dann muss ich das Laden evtl. manuell anstoßen?

und …
hatte AJAX gesehen - EVAL übersehen.
klar mit eval(responseText) geht es natürlich auch.

Ja. Schade nur, dass ich jQuery hauptsächlich deshalb einbinden will, um AJAX-Anfragen einfach und plattformunabhängig durchzuführen. :smiley:

LG,
Michael

#6

LÖSUNG: JavaScript in HTML-Seite nachladen und …

Ansätze:
ideal fänd ich, wenn es eine JavaScript Funktion gäbe, mit der
man JavaScript Code von einer http-adresse laden und direkt
ausführen könnte. Evtl. mit AJAX und eval?

Mein letzter Versuch, auf den Inhalt des HTML-Elements zuzugreifen, scheiterte lediglich an den browserbedingten Eigenarten. Dank http://glengamoi.com/forums/p/3442/12… bin ich aber auf die richtigen Attribute gestoßen worden. Es funktionierst jetzt für Mozilla wiefolgt:

javascript:
var jquery=document.createElement(„script“);
jquery.type=„text/javascript“;
jquery.src=„script.js“;
document.getElementsByTagName(‚head‘)[0].appendChild(jquery);
eval(jquery.textContent);
void(0)

Wichtig dabei ist, dass das Objekt in Zeile 5 in den DOM Baum eingehängt wird, sonst gibt es einen Fehler. Für die anderen Browser werden folgende Attribute verwendet:

Safari : jquery.innerHTML;
Opera, IE : jquery.text;
Mozilla : jquery.textContent;

Besonderen Dank nochmal an Klaus, der sich sofort um mein Problem kümmerte!!

VG,
Michael

#7

hallo michael,

eval(jquery.textContent);

das ist aber kein ajax-request
und … kommt mir eher wie ein bug vor :smile:))

http://glengamoi.com/forums/p/3442/12

leider nicht erreichbar

Wichtig dabei ist, dass das Objekt in Zeile 5 in den DOM Baum
eingehängt wird, sonst gibt es einen Fehler. Für die anderen
Browser werden folgende Attribute verwendet:

appendChild für head hattest Du in deinem ersten Artikel mit drin.
aber kein onload!!

so muss das eigentlich funktionieren (browserübergreifend):

var jquery=document.createElement(„script“);
jquery.type=„text/javascript“;
jquery.src=„js/jquery.js“;
jquery.id=„jquery“;
jquery.onload=„prepare()“;
document.getElementsByTagName(‚head‘)[0].appendChild(jquery);

prepare wird ausgeführt.
frage… gibt es da überhaupt eine function prepare?
also in den originalen von jquery 1.8 habe ich keine gefunden.

gruß
klaus

#8

hallo michael,

meinst du mit js-html-document, dass da nur document.write befehle drin stehen?
dann geht das natürlich mit eval.
ein ajax request sind doch nur ein paar zeilen… warum die dicke ui laden?

also mit script-element erzeugen und onload=schreiben()
wobei dann in der function schreiben alle write answeisungen stehen geht auch.

gruß
klaus

#9

Hallo Klaus,

eval(jquery.textContent);

das ist aber kein ajax-request

Nein, dafür aber eval. :smile:

und … kommt mir eher wie ein bug vor :smile:))

Du meinst, dass man sowas nicht verwenden sollte?

http://glengamoi.com/forums/p/3442/12

leider nicht erreichbar

Kommt davon, dass man es zu oft kopiert. :o)
http://glengamoi.com/forums/p/3442/12094.aspx

Wichtig dabei ist, dass das Objekt in Zeile 5 in den DOM Baum
eingehängt wird, sonst gibt es einen Fehler. Für die anderen
Browser werden folgende Attribute verwendet:

appendChild für head hattest Du in deinem ersten Artikel mit
drin.
aber kein onload!!

In meiner Antwort auf Deine Antwort von gestern Abend (22:55 Uhr) habe ich geschrieben, dass ich die Zeile (ebenfalls beim kopieren) versehentlich nicht eingefügt habe. Sie war im ursprünglichen Code aber drin. Trotzdem kam keine Antwort zurück. Vielleicht kannst Du da nochmal draufgucken? :smile:

so muss das eigentlich funktionieren (browserübergreifend):

var jquery=document.createElement(„script“);
jquery.type=„text/javascript“;
jquery.src=„js/jquery.js“;
jquery.id=„jquery“;
jquery.onload=„prepare()“;
document.getElementsByTagName(‚head‘)[0].appendChild(jquery);

prepare wird ausgeführt.

Also bei mir wurde die Funktion gar nicht ausgeführt, weder beim ersten Durchlauf, noch beim zweiten. :frowning:

frage… gibt es da überhaupt eine function prepare?

Ganz oben in meinem Script habe ich die definiert. Ich habe das so gemacht, weil ich erkennen wollte, wann das Skript geladen ist. Dass das jQuery Konstrukt ‚$(document)‘ nur null lieferte schob ich darauf, dass jQuery vielleicht nicht fertig geladen war.

Gruß,
Michael

#10

Hallo Klaus,

Du hängst Dich ja wirklich rein, um mir zu helfen. :smile:

meinst du mit js-html-document, dass da nur document.write
befehle drin stehen?
dann geht das natürlich mit eval.

Ich kann mich nicht erinnern, diese Kombination schon verwendet zu haben. ;o)
Mit ‚script-HTML-Objekts‘ meinte ich das Objekt, das aus dem html-Tag ‚[…]‘ erzeugt wird. Die nachzuladende Datei, z.B. ‚jquery.js‘, enthält nur JavaScript code.

ein ajax request sind doch nur ein paar zeilen… warum die
dicke ui laden?

Ein browserunabhängiger AJAX-Request inklusive asynchroner Verarbeitung sind nur ein paar Zeilen? Nun, dann habe ich das vermutlich überschätzt. Kennst Du zufällig eine gute Seite, die das beschreibt? Kurz ist gut.

also mit script-element erzeugen und onload=schreiben()
wobei dann in der function schreiben alle write answeisungen
stehen geht auch.

Ich habe es mit ‚document.write("");‘ versucht. Aber dabei wurde scheinbar eine neue Seite geladen, jedenfalls verschwand der html-Inhalt der geladenen Website bei der Ausführung. :frowning:

Viele Grüße,
Michael

#11

hallo michael,

und hast du es mal so versucht wo der fehler liegt?

jquery.onerror=„alert(‚vielleicht wird die JS nicht gefunden‘)“;

gruß
klaus

#12

Hallo Michael,

ich habe bei mir ein Ajax-script laufen, welches von einer php-datei (get.php) Daten holt und die in eine div schreibt.

var http\_request = false;

function load\_data() {

 if (window.XMLHttpRequest) {
 http\_request = new XMLHttpRequest();
 } else if (window.ActiveXObject) {
 try {
 http\_request = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
 try {
 http\_request = new ActiveXObject("Microsoft.XMLHTTP");
 } catch (e) {}
 }
 }
 if (!http\_request) {
 alert('Ende :frowning: Kann keine XMLHTTP-Instanz erzeugen');
 return false;
 }


 http\_request.open('GET', 'get.php', true);
 http\_request.onreadystatechange = Fertig;
 http\_request.send(null);
}


function Fertig () {

 if (http\_request.readyState == 4){
 var answer = http\_request.responseText;
 document.getElementById("content2").firstChild.nodeValue = answer;
 }

}

window.onload = "load\_data()";

die get.php ausgetauscht gegen deinen script und du hast den quelltext in answer stehen und kannst dies evaln.

gruß
klaus

#13

Hallo Klaus,

das ist in etwa das in knapper Form, was der Author des verlinkten Artikels http://glengamoi.com/forums/p/3442/12094.aspx verwendet hat, wobei ich mir unter wenigen Zeilen etwas anderes vorgestellt habe. Aber da muss man wohl durch, wenn man es browserübergreifend programmieren will.

Dass das zum testen verwendete jQuery Konstrukt „$(document)“ beim ersten Durchlauf nicht funktionierte, schiebe ich mal auf eine Eigenart von jQuery. Ich vermute, dass intern irgendwelche Loops gestartet werden müssen, die nachträglich - auch durch ein eval - nicht mehr richtig initialisiert werden können.

Ich werde also den jQuery-Ansatz jetzt aufgeben und mich an Deinen AJAX-Code halten. Vielen Dank nochmal für die klare Zusammenfassung, die hilft mir sehr viel weiter!

LG,
Michael

#14

jquery.onerror=„alert(‚vielleicht wird die JS nicht
gefunden‘)“;

Genau da liegt momentan mein Problem. Keine derart zugewiesene Callback-Funktion wird aufgerufen, weder onerror, noch onclick …
Wenn ich die Callbackfunktion über „callback()“ direkt aufrufe, wird sie problemlos ausgeführt. Nur nicht als Reaktion auf ein Event. :frowning:

Gruß,
Michael

#15

hallo michael,

so geht es !!

jquery.onload=function() {prepare()}

gruß
klaus