Gibt es eine einfachere (native?) Möglichkeit, eine externe Skriptdatei in den Google Chrome-Browser aufzunehmen?
Momentan mache ich das so:
document.head.innerHTML += '<script src="http://example.com/file.js"></script>';
javascript
google-chrome
console
include
Technocake
quelle
quelle
Antworten:
appendChild()
ist ein einheimischer Weg:quelle
TypeError: Property 'appendChild' of object #<HTMLHeadElement> is not a function
javascript_code
</ code> verwendet, um direkten Javascript-Code einzufügenVerwenden Sie ein AJAX-Framework? Mit jQuery wäre es:
Wenn Sie kein Framework verwenden, lesen Sie die Antwort von Harmen.
(Vielleicht lohnt es sich nicht, jQuery nur für diese eine einfache Sache zu verwenden ( oder vielleicht auch ), aber wenn Sie es bereits geladen haben, können Sie es auch verwenden. Ich habe Websites gesehen, auf denen jQuery geladen ist, z. B. mit Bootstrap, aber immer noch Verwenden Sie die DOM-API direkt auf eine Weise, die nicht immer portabel ist, anstatt die bereits geladene jQuery zu verwenden, und vielen Menschen ist nicht bewusst, dass
getElementById()
sie nicht in allen Browsern konsistent funktioniert. Weitere Informationen finden Sie in dieser Antwort . )AKTUALISIEREN:
Es ist Jahre her, seit ich diese Antwort geschrieben habe, und ich denke, es lohnt sich, hier darauf hinzuweisen, dass Sie heute Folgendes verwenden können:
Skripte dynamisch laden. Diese können für Personen relevant sein, die diese Frage lesen.
Siehe auch: Der Fluent 2014-Vortrag von Guy Bedford: Praktische Workflows für ES6-Module .
quelle
$.getScript('script.js');
oder$.getScript('../scripts/script.js');
dann verwenden, ist es relativ zum Dokument, aber es kann auch absolute URLs laden, z.$.getScript('https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore.js');
In den modernen Browsern können Sie den Abruf zum Herunterladen von Ressourcen ( Mozilla-Dokumente) verwenden ) und dann auszuwerten, um sie auszuführen.
Zum Herunterladen von Angular1 müssen Sie beispielsweise Folgendes eingeben:
quelle
eval
, mit der folgenden Meldung:VM1929:11 Uncaught (in promise) EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:".
In Chrome ist die Registerkarte "Snippets" unter "Quellen" in den Entwicklertools möglicherweise die beste Option.
Sie können damit Code schreiben und ausführen, z. B. auf einer leeren Seite.
Weitere Informationen finden Sie hier: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=de
quelle
Als Antwort auf die Antwort von @ maciej-bukowski über ^^^ können Sie ab sofort (Frühjahr 2017) in modernen Browsern, die async / await unterstützen, Folgendes laden. In diesem Beispiel laden wir die Bibliothek load html2canvas:
Wenn Sie das Snippet ausführen und dann die Konsole Ihres Browsers öffnen, sollte die Funktion html2canvas () jetzt definiert sein.
quelle
quelle
Wenn jemand nicht geladen werden kann, weil sein Skript gegen die script-src "Inhaltssicherheitsrichtlinie" verstößt oder "weil unsichere Bewertung nicht zulässig ist", empfehle ich, meinen ziemlich kleinen Modulinjektor als Dev-Tools-Snippet zu verwenden. dann können Sie wie folgt laden:
Diese Lösung funktioniert, weil:
quelle
Ich benutze dies, um ein Ko- Knockout-Objekt in die Konsole zu laden
oder lokal hosten
quelle
Installieren Sie tampermonkey und fügen Sie das folgende UserScript mit einem (oder mehreren)
@match
mit einer bestimmten Seiten-URL (oder einer Übereinstimmung aller Seiten :) hinzu,https://*
z.Wenn Sie die Bibliothek auf der Konsole oder in einem Snippet benötigen, aktivieren Sie das spezifische UserScript und aktualisieren Sie es.
Diese Lösung verhindert die Verschmutzung von Namespaces . Sie können benutzerdefinierte Namespaces verwenden, um ein versehentliches Überschreiben vorhandener globaler Variablen auf der Seite zu vermeiden.
quelle