Включить файл JavaScript в консоль Chrome

Question

Есть ли более простой (возможно, нативный) способ включить внешний файл сценария в браузер Google Chrome?

В настоящее время я делаю это так:

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

Answer 1

appendChild() - более родной способ:

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

Answer 2

Используете ли вы некоторые AJAX Framework? Используя jQuery, это будет:

$.getScript('script.js');

Если вы не используете фреймворк, посмотрите ответ Хармена.

(Может быть, не стоит использовать jQuery только для того, чтобы сделать эту простую вещь ( или, может быть, ), но если вы уже загрузили его, то вы могли бы также использовать его. Я видел сайты которые загружают jQuery, например, с помощью Bootstrap, но все еще используют DOM API напрямую, причем не всегда переносимым способом, вместо использования уже загруженного jQuery для этого, и многие люди не знают о том факте, что даже getElementById() не работать согласованно во всех браузерах - подробности см. в этом ответе .)

UPDATE:

Прошли годы с тех пор, как я написал этот ответ, и я думаю, что здесь стоит указать, что сегодня вы можете использовать:

• SystemJS
• ModuleLoader
• jspm.io

для динамической загрузки скриптов. Они могут иметь отношение к людям, читающим этот вопрос.

См. Также: Доклад Гая Бедфорда «Fluent 2014»: практические рабочие процессы для модулей ES6 .

Answer 3

В современных браузерах вы можете использовать fetch для загрузки ресурса ( Mozilla docs ) и затем eval для его запуска.

Например, для загрузки Angular1 вынужно набрать:

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 4

В chrome лучшим вариантом может быть вкладка «Фрагменты кода» в разделе «Источники» в инструментах разработчика.

Это позволит вам писать и запускать код, например, на пустой странице about:

Больше информации здесь: https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

Answer 5

В качестве ответа на ответ @ maciej-bukowski выше ^^^ , в современных браузерах (весна 2017 г.), которые поддерживают асинхронное ожидание / ожидание, вы можете загрузить их следующим образом.В этом примере мы загружаем библиотеку загрузки 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);

Если вы запустите сниппет и откроете консоль браузера, вы увидите, что теперь определена функция html2canvas ().

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);

Answer 7

Я использую это для загрузки ko выбиваемых объектов в консоли

document.write("<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-3.5.0.debug.js'></script>");

или локально хост

document.write("<script src='http://localhost/js/knockout-3.5.0.debug.js'></script>");