在Chrome控制台中包含JavaScript文件

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来做这个简单的事情(或者可能是这样)但是如果你已经加载它然后你也可以使用它.我已经看到有jQuery加载的网站,例如Bootstrap但仍然以一种并非总是可移植的方式直接使用DOM API,而不是使用已经加载的jQuery,并且很多人都没有意识到即使getElementById()在所有浏览器上也不能一致地工作 - 请参阅此答案以获取详细信息. )

更新:

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

• SystemJS
• ModuleLoader组件
• jspm.io

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

另见:Guy Bedford的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中,您最好的选择可能是Developer Tools中Sources下的Snippets选项卡.

它允许您编写和运行代码,例如,在about:空白页面中.

有关详细信息,请访问:https://developers.google.com/web/tools/chrome-devtools/debug/snippets/？hl = en

Answer 5

作为@ maciej-bukowski 上面^^^的答案的后续,在现在的浏览器(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

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

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

Answer 7

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 8

如果有人因为脚本违反了 script-src“内容安全策略”或“因为 unsafe-eval' 是不允许的”而无法加载，我会建议使用我的非常小的模块注入器作为开发工具片段，那么你就可以像这样加载：

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>

此解决方案有效，因为：

1. 它在xhr 中加载库- 这允许来自控制台的 CORS，并避免 script-src 策略。
2. 它使用xhr的同步选项，它允许您留在控制台/代码段的上下文中，因此您将有权评估脚本，而不会被视为不安全的评估。

Answer 9

如果您刚刚开始学习 javascript 并且不想花时间创建整个网页来嵌入测试脚本，只需在 Chrome 浏览器的新选项卡中打开开发工具，然后单击Console。

\n

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

\n

console.log('Aha!') \n

\n

然后在每行后按Enter（提交由 Chrome 执行）

\n

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

\n

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

\n

然后调用你的函数：

\n

console.log(file.function('\xe9\xa9\xa8\xea\x8d\xac\xe5\x95\xaf\xea\x8d\xb2\xe1\x95\xa4'))\n

\n

在 Google Chrome 85.0.4183.121 中测试

\n