有没有一种更简单(也许是原生的)的方法在 Google Chrome 浏览器中包含外部脚本文件?
目前我是这样做的。
document.head.innerHTML += '<script src="http://example.com/file.js"></script>';
appendChild()
是一种比较原生的方式。
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'script.js';
document.head.appendChild(script);
你用的是AJAX框架吗?用jQuery就可以了。
$.getScript('script.js');
如果你没有使用任何框架,那么请看Harmen的回答。
(也许不值得使用jQuery来做这一件简单的事情(也可能是)但如果你已经加载了它,那么你不妨使用它。我见过一些已经加载了jQuery的网站,比如用Bootstrap,但还是直接使用DOM API,而不是使用已经加载的jQuery来做,很多人并不知道即使是 getElementById()
并非在所有浏览器上都能稳定运行--请见 本回答 详见)。)
我写这个答案已经很多年了,我觉得值得在这里指出,今天你可以用。
来动态加载脚本。这些可能与阅读这个问题的人有关。
在现代浏览器中,你可以使用 取来 下载资源(Mozilla文档),然后用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 */ })
在chrome中,你最好的选择可能是在开发者工具的Sources下的Snippets标签。
它将允许你编写和运行代码,例如,在about:blank页面中。
更多信息请点击这里。https:/developers.google.comwebtoolschrome-devtoolsdebugsnippets?hl=en
作为对@maciej-布科夫斯基的回答的后续。以上^^,在现代浏览器中,截至目前(2017年春季),支持asyncawait的,你可以按如下方式加载。在这个例子中,我们加载加载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()这个函数已经被定义了。
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);
如果有人因为脚本违反了 script-src "内容安全策略 "或 "因为 unsafe-eval'不是允许的 "而导致加载失败,我会建议使用 我的小型模块喷射器 作为dev-tools snippet,那么你就可以像这样加载。
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>
这个方案之所以有效是因为:
我使用这个选项来加载 寇 淘汰对象
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>");
安装 驯兽师 并在下面的UserScript中添加一个(或多个) @match
与特定页面的url(或所有页面的匹配。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并刷新。
这个解决方案 防止命名空间污染. 你可以使用自定义命名空间来避免意外覆盖页面上现有的全局变量。