online - javascript console chrome

Incluir archivo JavaScript en la consola de Chrome

Question

¿Existe alguna manera más simple (nativa quizás?) De incluir un archivo de script externo en el navegador Google Chrome?

Actualmente lo estoy haciendo así:

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

Answer 1

¿Usas algún marco AJAX? Usando jQuery sería:

$.getScript(''script.js'');

Si no está utilizando ningún marco, entonces vea la respuesta de Harmen.

(Tal vez no valga la pena usar jQuery solo para hacer una cosa simple ( o tal vez lo es ) pero si ya la tienes cargada, entonces podrías usarla. He visto sitios web que tienen jQuery cargada, por ejemplo, con Bootstrap pero aún así utilice la API DOM directamente de una manera que no siempre sea portátil, en lugar de usar el jQuery ya cargado para eso, y muchas personas no están conscientes del hecho de que incluso getElementById() no funciona de manera consistente en todos los navegadores - vea esta respuesta para detalles.)

ACTUALIZAR:

Han pasado años desde que escribí esta respuesta y creo que vale la pena señalar aquí que hoy puede usar:

• SystemJS
• ModuleLoader
• jspm.io

cargar scripts dinámicamente Esos pueden ser relevantes para las personas que leen esta pregunta.

Ver también: The Fluent 2014 talk by Guy Bedford: Flujos de trabajo prácticos para módulos ES6 .

Answer 2

Como seguimiento de la respuesta de @ maciej-bukowski anterior ^^^ , en los navegadores modernos a partir de ahora (primavera de 2017) que admiten async / await puedes cargar de la siguiente manera. En este ejemplo, cargamos la biblioteca load 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);

Si ejecuta el fragmento y luego abre la consola de su navegador debería ver que la función html2canvas () ahora está definida.

Answer 3

En Chrome, su mejor opción podría ser la pestaña Fragmentos debajo de Fuentes en las Herramientas del desarrollador.

Le permitirá escribir y ejecutar código, por ejemplo, en una página sobre: ​​en blanco.

Más información aquí: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

Answer 4

En los navegadores modernos, puede usar el recurso de búsqueda para descargar ( documentos de Mozilla ) y luego evaluar para ejecutarlo.

Por ejemplo, para descargar Angular1 necesitas escribir:

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 */ })

Answer 5

appendChild() es una forma más nativa:

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

Answer 6

var el = document.createElement("script"),
loaded = false;
el.onload = el.onreadystatechange = function () {
  if ((el.readyState && el.readyState !== "complete" && el.readyState !== "loaded") || loaded) {
    return false;
  }
  el.onload = el.onreadystatechange = null;
  loaded = true;
  // done!
};
el.async = true;
el.src = path;
var hhead = document.getElementsByTagName(''head'')[0];
hhead.insertBefore(el, hhead.firstChild);