Ich <script>
füge einer Seite dynamisch Tags hinzu <head>
und möchte feststellen können, ob das Laden auf irgendeine Weise fehlgeschlagen ist - ein 404, ein Skriptfehler im geladenen Skript, was auch immer.
In Firefox funktioniert dies:
var script_tag = document.createElement('script');
script_tag.setAttribute('type', 'text/javascript');
script_tag.setAttribute('src', 'http://fail.org/nonexistant.js');
script_tag.onerror = function() { alert("Loading failed!"); }
document.getElementsByTagName('head')[0].appendChild(script_tag);
Dies funktioniert jedoch nicht in IE oder Safari.
Kennt jemand eine Möglichkeit, dies in anderen Browsern als Firefox zum Laufen zu bringen?
(Ich denke nicht, dass eine Lösung, bei der spezieller Code in die .js-Dateien eingefügt werden muss, gut ist. Sie ist unelegant und unflexibel.)
javascript
onerror
script-tag
David
quelle
quelle
if
+ Polling ist eine nervige Kruft, die ich nicht in alle JS stecken möchte.Antworten:
Es gibt kein Fehlerereignis für das Skript-Tag. Sie können feststellen, wann es erfolgreich ist, und davon ausgehen, dass es nach einer Zeitüberschreitung nicht geladen wurde:
quelle
Wenn Sie sich nur für HTML5-Browser interessieren, können Sie ein Fehlerereignis verwenden (da dies nur zur Fehlerbehandlung dient, sollte es in Ordnung sein, dies nur in Browsern der nächsten Generation für KISS IMHO zu unterstützen).
Aus der Spezifikation:
~
Dies bedeutet, dass Sie keine fehleranfälligen Abfragen durchführen müssen und diese mit den Attributen asynchron und verzögern kombinieren können, um sicherzustellen, dass das Skript das Rendern von Seiten nicht blockiert:
Mehr unter http://www.w3.org/TR/html5/scripting-1.html#script
quelle
<script src="nonexistent.js" onerror="alert('error!')"></script>
GeigeUncaught SyntaxError: Unexpected token '<'
(im neuesten Chrome)<script src="nonexistent.js" onerror="alert('error!')"></script>
sollte in Ihre HTML-Datei gehen, nicht JS.Das Skript von Erwinus funktioniert hervorragend, ist aber nicht sehr klar codiert. Ich nahm mir die Freiheit, es aufzuräumen und zu entziffern, was es tat. Ich habe diese Änderungen vorgenommen:
prototype
.require()
verwendet eine Argumentvariablealert()
Standardmäßig werden keine Nachrichten zurückgegebenNochmals vielen Dank an Erwinus, die Funktionalität selbst ist genau richtig.
quelle
meine funktionierende saubere Lösung (2017)
Wie Martin zeigte, so verwendet:
ODER
quelle
loaderScript("myscript.js").then(() => { console.log("loaded"); }).catch(() => { console.log("error"); });
Ich weiß, dass dies ein alter Thread ist, aber ich habe eine nette Lösung für Sie (glaube ich). Es wurde von einer meiner Klassen kopiert, die alle AJAX-Sachen handhabt.
Wenn das Skript nicht geladen werden kann, wird ein Fehlerhandler festgelegt. Wenn der Fehlerhandler jedoch nicht unterstützt wird, wird auf einen Timer zurückgegriffen, der 15 Sekunden lang nach Fehlern sucht.
quelle
Um zu überprüfen, ob das Javascript in
nonexistant.js
keinen Fehler zurückgegeben hat, müssen Sie eine Variable inhttp://fail.org/nonexistant.js
like hinzufügenvar isExecuted = true;
und dann prüfen, ob sie beim Laden des Skript-Tags vorhanden ist.Wenn Sie jedoch nur überprüfen möchten, ob die
nonexistant.js
Rückgabe ohne 404 erfolgt (was bedeutet, dass sie vorhanden ist), können Sie es mit einerisLoaded
Variablen versuchen ...Dies wird beide Fälle abdecken.
quelle
Ich hoffe, dass dies nicht herabgestuft wird, da es unter besonderen Umständen der zuverlässigste Weg ist, das Problem zu lösen. Jedes Mal, wenn der Server es Ihnen ermöglicht, mithilfe von CORS eine Javascript-Ressource abzurufen ( http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) ) , stehen Ihnen zahlreiche Optionen zur Verfügung.
Die Verwendung von XMLHttpRequest zum Abrufen von Ressourcen funktioniert in allen modernen Browsern, einschließlich IE. Da Sie Javascript laden möchten, steht Ihnen zunächst Javascript zur Verfügung. Sie können den Fortschritt mit dem readyState ( http://en.wikipedia.org/wiki/XMLHttpRequest#The_onreadystatechange_event_listener ) verfolgen . Sobald Sie den Inhalt der Datei erhalten haben, können Sie ihn mit eval () ausführen. Ja, ich habe eval gesagt - da es sich aus Sicherheitsgründen nicht vom normalen Laden des Skripts unterscheidet. Tatsächlich schlägt John Resig eine ähnliche Technik vor, um schönere Tags zu haben ( http://ejohn.org/blog/degrading-script-tags/ ).
Mit dieser Methode können Sie auch das Laden von der Auswertung trennen und Funktionen vor und nach der Auswertung ausführen. Dies ist sehr nützlich, wenn Sie Skripte parallel laden, aber nacheinander auswerten. Dies können Browser problemlos tun, wenn Sie die Tags in HTML platzieren. Sie können dies jedoch nicht tun, indem Sie zur Laufzeit mit Javascript Skripte hinzufügen.
CORS ist auch JSONP zum Laden von Skripten vorzuziehen ( http://en.wikipedia.org/wiki/XMLHttpRequest#Cross-domain_requests ). Wenn Sie jedoch eigene Widgets von Drittanbietern entwickeln, die in andere Websites eingebettet werden sollen, sollten Sie die Javascript-Dateien aus Ihrer eigenen Domain in Ihren eigenen Iframe laden (ebenfalls mit AJAX).
Zusamenfassend:
Versuchen Sie herauszufinden, ob Sie die Ressource mit AJAX GET laden können
Verwenden Sie eval, nachdem es erfolgreich geladen wurde
Um es zu verbessern:
Überprüfen Sie die gesendeten Cache-Control-Header
Prüfen Sie gegebenenfalls, ob Sie den Inhalt in localStorage zwischenspeichern möchten
Schauen Sie sich Resigs "erniedrigendes Javascript" an, um saubereren Code zu erhalten
Check out require.js
quelle
Dieser Trick hat bei mir funktioniert, obwohl ich zugebe, dass dies wahrscheinlich nicht der beste Weg ist, um dieses Problem zu lösen. Anstatt dies zu versuchen, sollten Sie sehen, warum die Javascripts nicht geladen werden. Versuchen Sie, eine lokale Kopie des Skripts auf Ihrem Server usw. aufzubewahren, oder wenden Sie sich an den Drittanbieter, von dem Sie versuchen, das Skript herunterzuladen.
Wie auch immer, hier ist die Problemumgehung: 1) Initialisieren Sie eine Variable auf false. 2) Setzen Sie sie auf true, wenn das Javascript geladen wird (mithilfe des onload-Attributs). 3) Überprüfen Sie, ob die Variable true oder false ist, nachdem der HTML-Body geladen wurde
quelle
Hier ist eine weitere JQuery-basierte Lösung ohne Timer:
Dank an: https://stackoverflow.com/a/14691735/1243926
Beispielnutzung (Originalbeispiel aus der JQuery getScript-Dokumentation ):
quelle
cache:true
für den Aufruf von $ .getScript (dies ist standardmäßig deaktiviert). Auf diese Weise wird für die meisten Anfragen automatisch die zwischengespeicherte Version für den getScript-Aufruf verwendet (wodurch Sie Latenz sparen)Dies kann sicher mit Versprechungen geschehen
und so verwenden
quelle
Der Grund, warum es in Safari nicht funktioniert, ist, dass Sie die Attributsyntax verwenden. Dies wird jedoch gut funktionieren:
... außer im IE.
Wenn Sie überprüfen möchten, ob das Skript erfolgreich ausgeführt wurde, legen Sie einfach eine Variable mit diesem Skript fest und prüfen Sie, ob sie im äußeren Code festgelegt ist.
quelle
<script>
. Wenn Sie versuchen, es zuvor hinzuzufügen, wird die Fehlermeldung angezeigt, dass das Tag nicht vorhanden ist. Wenn Sie es anschließend hinzufügen, wird das Skript bereits ausgeführt und hat seine Ereignisse ausgelöst. Die einzige Möglichkeit besteht darin, nach Nebenwirkungen zu suchen, die durch das Skript verursacht werden.Es wurde vorgeschlagen, ein Timeout festzulegen und nach einem Timeout einen Lastfehler anzunehmen.
Das Problem bei diesem Ansatz ist, dass die Annahme auf dem Zufall basiert. Nach Ablauf Ihres Timeouts steht die Anforderung noch aus. Die Anforderung für das ausstehende Skript wird möglicherweise geladen, selbst nachdem der Programmierer angenommen hat, dass das Laden nicht erfolgt.
Wenn die Anforderung abgebrochen werden könnte, könnte das Programm eine Zeit lang warten und dann die Anforderung abbrechen.
quelle
So habe ich ein Versprechen verwendet, um Ladefehler zu erkennen, die auf dem Fensterobjekt ausgegeben werden:
quelle
Der einzige Weg, wie ich mir vorstellen kann, alles zu tun, was du willst, ist ziemlich hässlich. Führen Sie zuerst einen AJAX-Aufruf aus, um den Inhalt der Javascript-Datei abzurufen. Wenn dies abgeschlossen ist, können Sie den Statuscode überprüfen, um zu entscheiden, ob dies erfolgreich war oder nicht. Nehmen Sie dann den responseText aus dem xhr-Objekt und verpacken Sie ihn in einen try / catch, erstellen Sie dynamisch ein Skript-Tag. Für IE können Sie die Texteigenschaft des Skript-Tags in allen anderen Browsern auf den JS-Text setzen Hängen Sie einen Textknoten mit dem Inhalt an das Skript-Tag an. Wenn Code vorhanden ist, der erwartet, dass ein Skript-Tag tatsächlich den Quellspeicherort der Datei enthält, funktioniert dies nicht, sollte jedoch in den meisten Situationen in Ordnung sein.
quelle
onerror Event
* Update August 2017: onerror wird von Chrome und Firefox ausgelöst. Onload wird von Internet Explorer ausgelöst. Edge feuert weder Fehler noch Last ab. Ich würde diese Methode nicht verwenden, aber es könnte in einigen Fällen funktionieren. Siehe auch
<link> onerror funktioniert nicht im IE
* *
Definition und Verwendung Das Fehlerereignis wird ausgelöst, wenn beim Laden einer externen Datei (z. B. eines Dokuments oder eines Bildes) ein Fehler auftritt.
Tipp: Bei Verwendung auf Audio- / Videomedien treten folgende Ereignisse auf, wenn der Ladevorgang des Mediums gestört wird:
In HTML:
element onerror = "myScript">
Verwenden Sie in JavaScript die Methode addEventListener ():
object.addEventListener ("error", myScript);
Hinweis: Die Methode addEventListener () wird in Internet Explorer 8 und früheren Versionen nicht unterstützt.
Beispiel Führen Sie ein JavaScript aus, wenn beim Laden eines Bildes ein Fehler auftritt:
img src = "image.gif" onerror = "myFunction ()">
quelle