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?
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
vielen Dank für Deine schnelle Reaktion, ich habe heute nicht wirklich mit einer Antwort gerechnet.
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.
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.
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!!
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.
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.
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?
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.
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.
Du hängst Dich ja wirklich rein, um mir zu helfen.
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.
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!
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.
