Hur man inkluderar en JavaScript-fil eller ett bibliotek i Chrome-konsolen?

Finns det ett enklare (kanske inbyggt?) sätt att inkludera en extern skriptfil i Google Chrome-webbläsaren?

För närvarande gör jag det så här:

document.head.innerHTML += '<script src="http://example.com/file.js"></script>';

Svar #1

appendChild() är ett mer inhemskt sätt:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);

Svar #2

Använder du något AJAX-ramverk? Med jQuery skulle det vara:

$.getScript('script.js');

Om du inte använder något ramverk, se då svaret av Harmen.

(Kanske är det inte värt att använda jQuery bara för att göra denna enkla sak (eller kanske är det det), men om du redan har det laddat kan du lika gärna använda det. Jag har sett webbplatser som har jQuery laddat t.ex. med Bootstrap men ändå använder DOM-API direkt på ett sätt som inte alltid är portabelt, istället för att använda det redan laddade jQuery för det, och många människor är inte medvetna om att även getElementById() inte fungerar konsekvent på alla webbläsare - se detta svar för detaljer.)

UPPDATERING :

Det har gått år sedan jag skrev detta svar och jag tycker det är värt att påpeka här att idag kan du använda:

  • SystemJS
  • ModuleLoader
  • jspm.io

att dynamiskt ladda skript. Dessa kan vara relevanta för personer som läser denna fråga.

Se även: The Fluent 2014-föreläsningen av Guy Bedford: Praktiska arbetsflöden för ES6-moduler.

Svar #3

I moderna webbläsare kan du använda fetch för att ladda ner resurser (Mozilla-dokumentation) och sedan eval för att köra dem.

Till exempel för att ladda ner Angular1 behöver du skriva:

fetch('https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js')
    .then(response => response.text())
    .then(text => eval(text))
    .then(() => { /* now you can use your library */ })

Svar #4

Som en uppföljning på svaret från @maciej-bukowski ovan ^^^, i moderna webbläsare från och med nu (våren 2017) som stödjer async/await kan du ladda på följande sätt. I detta exempel laddar vi biblioteken html2canvas:

async function loadScript(url) {
  let response = await fetch(url);
  let script = await response.text();
  eval(script);
}

let scriptUrl = 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js'
loadScript(scriptUrl);

Om du kör kodsnutten och sedan öppnar din webbläsares konsol bör du se att funktionen html2canvas() nu är definierad.

Svar #5

I Chrome kan ditt bästa alternativ vara fliken Snippets under Källor i Utvecklarverktygen.

Det kommer att tillåta dig att skriva och köra kod, till exempel på en about:blank-sida.

Mer information här: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

Svar #6

Du kan hämta skriptet som text och sedan utvärdera det:

eval(await (await fetch('http://example.com/file.js')).text())

Relaterade artiklar