如何在Chrome控制台中包含JavaScript文件或库?

2020/10/13 11:01 · javascript ·  · 0评论

有没有更简单的方法(也许是本机?)在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,那么您也可以使用它。我见过已经加载了jQuery的网站,例如Bootstrap,但仍然直接以不总是可移植的方式使用DOM API,而不是为此使用已加载的jQuery,而且许多人并不了解甚至getElementById()在所有浏览器上都无法正常工作的事实-有关详细信息,请参见此答案。 )

更新:

自从我写了这个答案已经好多年了,我认为值得指出的是,今天您可以使用:

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

另请参见:Guy Bedford的Fluent 2014演讲:ES6模块的实用工作流程

在现代的浏览器中,您可以使用fetch下载资源(Mozilla docs),然后评估执行该资源。

例如,要下载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 */ })

作为^^^上方@ 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()。

在Chrome浏览器中,最好的选择可能是“开发人员工具”中“源”下的“片段”标签。

例如,它将允许您在about:blank页面中编写和运行代码。

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

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

如果有人因为脚本违反了脚本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同步选项,该选项允许您停留在控制台/摘录的上下文中,因此您将有权评估脚本,而不会被视为不安全评估。

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

安装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并刷新。

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

如果您只是开始学习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中测试

本文地址:http://javascript.askforanswer.com/ruhezaichromekongzhitaizhongbaohanjavascriptwenjianhuoku.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!