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框架吗？使用jQuery将是：

$.getScript('script.js');

如果您没有使用任何框架，请参阅Harmen的答案。

（也许不值得使用jQuery只是为了做一件简单的事情（or maybe it is）但是如果你已经加载了它那么你也可以使用它。我已经看过加载了jQuery的网站，例如使用Bootstrap但仍然以一种并非总是可移植的方式直接使用DOM API，而不是使用已经加载的jQuery，并且很多人都不知道即使getElementById()也不能始终如一地工作所有浏览器 - 有关详细信息，请参阅this answer。）

UPDATE：

我写这个答案已经好几年了，我认为值得指出今天你可以使用：

动态加载脚本。这些可能与阅读这个问题的人有关。

另请参阅：The Fluent 2014 talk by Guy Bedford: Practical Workflows for ES6 Modules。

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：blank页面中。

此处提供更多信息：https://developers.google.com/web/tools/chrome-devtools/debug/snippets/?hl=en

Answer 5

作为@ maciej-bukowski above ^^^答案的后续内容，截至目前（2017年春季）的现代浏览器支持async / await，您可以按如下方式加载。在这个例子中，我们加载了负载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

如果有人因为脚本违反了脚本src“内容安全策略”或“因为不允许unsafe-eval”而无法加载，我建议使用my pretty-small module-injector作为开发工具代码段，那么您将可以像这样加载：

imports('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js')
  .then(()=>alert(`today is ${moment().format('dddd')}`));

<script src="https://raw.githack.com/shmuelf/PowerJS/master/src/power-moduleInjector.js"></script>

此解决方案之所以有效，是因为：

它在 xhr 中加载库-允许从控制台进行CORS，并避免执行script-src策略。
它使用xhr的 synchronous 选项，使您能够停留在控制台/代码段的上下文中，因此您将有权评估脚本，而不会被视为不安全-评估

Answer 8

我用它在控制台中加载 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>");

Answer 9

安装tampermonkey，然后将以下UserScript以及一个（或多个）@match添加到具有特定页面网址（或所有页面的匹配项：https://*）中，例如：

// ==UserScript==
// @name         inject-rx
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Inject rx library on the page
// @author       Me
// @match        https://www.some-website.com/*
// @require      https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.4/rxjs.umd.min.js
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
     window.injectedRx = rxjs;
     //Or even:  window.rxjs = rxjs;

})();

每当需要在控制台或代码段上使用库时，请启用特定的UserScript并刷新。

此解决方案防止名称空间污染。您可以使用自定义名称空间来避免意外覆盖页面上现有的全局变量。

Answer 10

如果您只是开始学习JavaScript而不想花时间创建整个网页仅用于嵌入测试脚本，只需在Chrome浏览器中的新标签页中打开开发工具，然后单击Console

然后输入一些测试脚本：例如

console.log('Aha!')

然后在每一行之后按 Enter （以提交供Chrome执行）

或加载您自己的“外部脚本文件”：

document.createElement('script').src = 'http://example.com/file.js';

然后调用您的函数：

console.log(file.function('驨ꍬ啯ꍲᕤ'))

在Google Chrome 85.0.4183.121中进行了测试

Answer 11

您可以将脚本作为文本获取，然后对其进行评估：

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

在Chrome控制台中包含JavaScript文件

11 个答案:

UPDATE：