nicht angemeldet
Prüfen, ob eingebundenes Script fertig geladen ist und Youtube API onPlayerReady() wahr ist
Rolf B
Gunnar Bittersmann
Matthias ApselPrüfen, ob eingebundenes Script fertig geladen ist und Youtube API onPlayerReady() wahr ist
Hallo,
ich habe in einer HTML Seite ein Javascript (direkt als Code, nennt man das "inline Script"?) und ein Javascript welches ich über eine Datei einbinde. Da dieses Script, aber nur unter bestimmten Bedingungen geladen werden soll, binde ich es über einen solchen Code ein.
// Script laden (ans Ende von <head> einfügen)
console.log("dummy.js laden");
var ytScript = document.createElement("script");
ytScript.type = "text/javascript";
ytScript.src = "dummy.js";
$("head").append(ytScript);
Wie kann ich hier an dieser Stelle prüfen, ob das Script fertig geladen ist?
Gibt es so etwas wie $(document["dummy.js"]).ready(function() {...?
Gruß ebody
-
Hallo ebody,
ja. Das Script-Element hat ein load Event. Entweder an die onload Eigenschaft eine function zuweisen oder mit addEventListener('load', ...).
Die Funktion wird asynchron aufgerufen sobald das Script geladen ist. Wie jeder Eventhandler eben.
Rolf
--
sumpsi - posui - clusi-
Hallo Ingrid,
ach so, jQuery....
$(ytScript).one('load', function() { ... });.one registriert ein „Einmalevent“.
Rolf
--
sumpsi - posui - clusi-
Hallo Irmgard,
ich habe verschiedene Varianten ausprobiert
addEventListener("load", function(){ ytScript.addEventListener("load", function(){ var path = "test/dummy.js"; path.addEventListener("load", function(){und noch einige andere, aber das scheint nicht zu funktionieren.
Ich habe dann $("dummy.js").ready(function{... ausprobiert, das hat funktioniert. Sobald ich aber einen Pfad angebe, wie var path = "test/dummy.js"; funktioniert $(path).ready(function{... nicht mehr. (Die Datei liegt im auch im Ordner /test/).
Die Datei dummy.js enthält folgenden Code
$(document).ready(function() { myCustomFlag = true; });In der HTML Datei führe ich das Script aus, das prüfen soll, ob das Script dummy.js fertig geladen ist und ob die Variable myCustomFlag = true ist und somit geändert wurde, was mir noch mal zusätzlich bestätigen würde, dass alle notwendigen Variablen aus dem Script nun zur Verfügung stehen.
$(document).ready(function() { var myCustomFlag = false; var path = "test/dummy.js"; // wenn dummy.js fertig geladen ist $("dummy.js").ready(function{ console.log("dummy.js geladen."); // Prüfen, ob sich die Variable myCustomFlag geändert hat if (myCustomFlag != true) { console.log("myCustomFlag != true"); //$.getScript('<external JS>'); } else { console.log("myCustomFlag == true"); } }); });Wie kann man hier $("dummy.js").ready(function{ einen Pfad angeben?
Gruß ebody
-
Hallo ebody,
$("dummy.js").ready(function{...})
Bitte erfinde keine Semantik, die nicht dokumentiert ist. Lies die jQuery Doku!
$(string) hat die Aufgabe, im DOM Elemente zu selektieren. $("dummy.js") würde also nach einem Element Element mit Tagname „dummy“ und der class "js" suchen. Das gibt's wohl eher nicht in deinem DOM, daher liefert $("dummy.js") ein leeres matched set.
Aber der .ready Funktion ist es wurscht, was im matched set drin ist. Sie registriert einfach einen Handler auf dem Dokument, der zuschlägt wenn das Dokument fertig geladen ist. Denn $(irgendwas).ready(function (){}) ist nur ein Alias für $(function() {}). Das „irgendwas“ ist ohne Bedeutung. Die Besonderheit von .ready im Vergleich zu selbstregistrierten Eventhandlern ist, dass jQuery sich merkt, dass das DOM im ready-Zustand ist. Wenn Du im ready-Zustand einen ready-Handler registrieren willst, wird er sofort ausgeführt. Deshalb: wenn Du .ready in .ready schachtelst, wird der Handler im inneren .ready einfach sofort aufgerufen.
test/dummy.jsist allerdings ein ungültiger Selektor - es gibt m.W. keinen / Kombinator. Deswegen mag es sein, dass das zu einem Abbruch des $() Aufrufs führt (oder null zurückkommt) und deshalb der vom Return-Wert abhängige ready-Aufruf nicht ausgeführt wird. Das müsste sich an an Hand von Console-Logeinträgen feststellen lassen.Es ist aber auch piep-egal; $(dateiname) ist nichts, was in jQuery definiert wäre, diesen Weg brauchst Du nicht zu erkunden.
Hast Du den von mir vorgeschlagenen
loadEventhandler registriert, bevor oder nachdem Du das Script-Tag an den Head gehängt hast? Es kann sein, dass man das tun muss, nachdem das Element im DOM ist; ich habe nur gerade keine Zeit um das zu verifizieren.Was ich aber beim Nachlesen des .ready Verhalten gefunden habe (Lesen der Doku bildet!): Es gibt eine $.getScript-Funktion in jQuery. Dieser Funktion bietet einen Callback an, wenn das Script erfolgreich geladen wurde (ohne eine Zusicherung über die Reihenfolge, in der der Callback und das geladene Script ausgeführt werden).
$.getScript("dummy.js", function() { console.log("dummy.js ist geladen"); });Rolf
--
sumpsi - posui - clusi-
@@Rolf B
Hast Du den von mir vorgeschlagenen
loadEventhandler registriertWarum das Rad neu erfinden, was bei anderen schon rund läuft?
Hast Du das von mir vorgeschlagene
loadJSprobiert?LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo Gunnar,
ich habe das nicht ausprobiert. Wenn ICH das brauche, nehme ich requireJS - ist im Projekt eh drin.
Da ebody ohnehin jQuery drin hat, könnte .getScript für ihn interessant sein. Das habe ich aber erst entdeckt als der Rest vom Posting schon stand.
Rolf
--
sumpsi - posui - clusi
-
-
-
-
-
-
@@ebody
var ytScript = document.createElement("script");DOM-API, Vanilla-JavaScript.
ytScript.type = "text/javascript";Unnütz.
$("head").append(ytScript);jQuery? WFT?
Warum vermischt du jQuery und Vanilla-JavaScript? Kannst du dich mal für eins entscheiden? Vorzugsweise für Vanilla-JavaScript. jQuery braucht man heutzutage nicht mehr.
Die Zeile in Vanilla-JavaScript:
document.head.appendChild(ytScript);Gibt es so etwas wie …
Es gibt sowas wie loadJS. Das dürfte deinen Anwendungsfall abdecken.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hi,
ich wusste gar nicht, dass es Vanilla-JavaScript gibt und benutze. Aber warum regt es dich so auf, wenn man Scripte vermischt? Es ist bestimmt nicht sauber und nehme das auch mit, aber ich verstehe nicht, warum jemanden so eine Kleinigkeit so aufregt.
jQuery braucht man heutzutage nicht mehr.
Warum nicht?
Grüße + Frieden ebody
-
Hallo ebody,
Gunnar regt sich über jQuery grundsätzlich auf.
Vanilla-XXX steht im Englischen für "XXX ohne irgendwelche Zusätze". Warum auch immer.
Rolf
--
sumpsi - posui - clusi-
@@Rolf B
Hallo ebody,
Gunnar regt sich über jQuery grundsätzlich auf.
Ja, jQuery bietet so einiges, worüber man sich nur aufregen kann.
Hier ging es aber um den Mischmasch – kein Plan, wie man JavaScript-Code schreibt. Das fällt einem wohl eher früher als später auf die Füße.
In jQuery würde das wohl so aussehen (ungetestet):
console.log("dummy.js laden"); var $ytScript = $('<script src="dummy.js">'); $("head").append($ytScript);LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Tach!
In jQuery würde das wohl so aussehen (ungetestet):
https://api.jquery.com/jquery.getscript/
dedlfix.
-
-
Hallo Rolf B,
Vanilla-XXX steht im Englischen für "XXX ohne irgendwelche Zusätze". Warum auch immer.
Weil ganz normales Vanille-Eis (plain vanilla) die am häufigsten verlangte Eissorte war.
Bis demnächst
Matthias--
Rosen sind rot.
-
-
hallo
ich wusste gar nicht, dass es Vanilla-JavaScript gibt und benutze. Aber warum regt es dich so auf, wenn man Scripte vermischt? Es ist bestimmt nicht sauber und nehme das auch mit, aber ich verstehe nicht, warum jemanden so eine Kleinigkeit so aufregt.
jQuery braucht man heutzutage nicht mehr. Warum nicht?
Weil jQuery die Probleme von vorgestern lösen soll.
-
-