在 JavaScript 控制台中包含 jQuery

Posted 2023-02-14

技术标签:

【中文标题】在 JavaScript 控制台中包含 jQuery【英文标题】：Include jQuery in the JavaScript Console 【发布时间】：2011-11-20 10:06:53 【问题描述】：

对于不使用它的网站，是否有一种简单的方法可以在 Chrome javascript 控制台中包含 jQuery？例如，在一个网站上，我想获取表格中的行数。我知道使用 jQuery 真的很容易。

$('element').length;

该网站不使用 jQuery。我可以从命令行添加它吗？

【问题讨论】：

对于更多的自动化方法，您可以使用用户脚本来包含它。说真的，这就像一个 5 行用户脚本：P document.getElementById('tableID').rows.length。如果表没有 ID，请使用 DOM 编辑器给它一个。你不需要 jQuery 来完成如此荒谬的微不足道的事情。有一个 chrome 扩展可以做到这一点 - chrome.google.com/webstore/detail/script-injector/… 将它添加到脚本标签，无论是从 CDN 还是本地。 CDN 要简单得多。我相信大多数主要浏览器的开发工具现在默认包含 jQuery（以及一些其他流行的库，如 Underscore），但我无法找到它的文档。弹出打开控制台它通常只是工作（tm）。 ------ 此外，这种方法（现在）早已被几个人内置到一个方便的书签中。我已经成功使用了这个：learningjquery.com/2009/04/…. 【参考方案1】：

在浏览器的 JavaScript 控制台中运行它，然后 jQuery 应该可用...

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

注意：如果网站的脚本与 jQuery（其他库等）冲突，您仍然可能会遇到问题。

更新：

把最好的做得更好，创建一个书签真的很方便，让我们去做吧，一点反馈也很棒：

添加页面

javascript:(function(e,s)e.src=s;e.onload=function()jQuery.noConflict();console.log('jQuery注入');document.head.appendChild( e);)(document.createElement('script'),'//code.jquery.com/jquery-latest.min.js')

下面是格式化代码：

javascript: (function(e, s) 
    e.src = s;
    e.onload = function() 
        jQuery.noConflict();
        console.log('jQuery injected');
    ;
    document.head.appendChild(e);
)(document.createElement('script'), '//code.jquery.com/jquery-latest.min.js')

这里使用的是官方的 jQuery CDN URL，请随意使用自己的 CDN/版本。

【讨论】：

这个 sn-p 对我不起作用。没有时间弄清楚为什么。只需复制code.jquery.com/jquery-latest.min.js 文件内容并粘贴到控制台。完美运行。这不能写成：``` javascript: (function(e, s) var element = document.createElement('script'); var jqueryUrl = '//code.jquery .com/jquery-latest.min.js'; element.src = jqueryUrl; element.onload = function() jQuery.noConflict(); console.log('jQuery 注入'); ; document.head.appendChild( e); ) ``` ?【参考方案2】：

在您的控制台中运行它

var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0].appendChild(script);

它创建一个新的脚本标签，用 jQuery 填充它并附加到头部。

【讨论】：

【参考方案3】：

复制所有内容：https://code.jquery.com/jquery-3.4.1.min.js

并将其粘贴到控制台中。完美运行。

【讨论】：

像魅力一样工作！并且它不会将脚本添加到 DOM，这有时由于“内容安全策略指令”而无法实现。我尝试了接受的答案，结果是：拒绝加载脚本'ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'，因为它违反了以下内容安全策略指令：“script-src ....【参考方案4】：

使用 jQueryify 小册子：

https://web.archive.org/web/20190502132317/http://marklets.com/jQuerify.aspx

而不是复制粘贴其他答案中的代码，这将使它成为一个可点击的书签。

【讨论】：

【参考方案5】：

添加到@jondavidjohn 的答案，我们还可以将其设置为书签，以 URL 作为 javascript 代码。

名称：包括 Jquery

网址：

javascript:var jq = document.createElement('script');jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(jq); setTimeout(function() jQuery.noConflict(); console.log('jQuery loaded'); , 1000);void(0);

然后将其添加到 Chrome 或 Firefox 的工具栏，这样我们就无需一次又一次地粘贴脚本，只需单击小书签即可。

【讨论】：

【参考方案6】：

我是个叛逆者。

解决方案：不要使用 jQuery。 jQuery 是一个用于抽象跨浏览器的 DOM 不一致的库。由于您在自己的控制台中，因此不需要这种抽象。

你的例子：

$$('element').length

（$$ 是控制台中document.querySelectorAll 的别名。）

对于任何其他示例：我确信我可以找到任何东西。特别是如果您使用的是现代浏览器（Chrome、FF、Safari、Opera）。

此外，了解 DOM 的工作原理不会伤害任何人，它只会提高您的 jQuery 水平（是的，更多地了解 javascript 会让您在 jQuery 方面做得更好）。

【讨论】：

【参考方案7】：

2020 年后方法，使用：

dynamic import self executing IIFE asynchronous function arrow function

(async () => 
  await import('https://code.jquery.com/jquery-2.2.4.min.js')
  // Library ready
  console.log(jQuery)
)()

没有异步，导入返回一个Promise，我们必须使用.then()：

import('https://code.jquery.com/jquery-2.2.4.min.js')
  .then( () => 
    console.log(jQuery)
  
)

Another example

https://caniuse.com/es6-module-dynamic-import

【讨论】：

【参考方案8】：

我刚刚制作了一个带有错误处理的 jQuery 3.2.1 小书签（仅在尚未加载时加载，如果已加载则检测版本，如果加载时出错则显示错误消息）。在 Chrome 27 中测试。没有理由在 Chrome 浏览器上使用“旧”jQuery 1.9.1，因为 jQuery 2.0 is API-compatible with 1.9。

只需在 Chrome 的开发者控制台中运行以下命令或将其拖放到书签栏中：

javascript:((function()if(typeof(jQuery)=="undefined")window.jQuery="loading";var a=document.createElement("script");a.type="text/javascript";a.src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function()console.log("jQuery "+jQuery.fn.jquery+" loaded successfully.");a.onerror=function()delete jQuery;alert("Error while loading jQuery!");document.getElementsByTagName("head")[0].appendChild(a)elseif(typeof(jQuery)=="function")alert("jQuery ("+jQuery.fn.jquery+") is already loaded!")elsealert("jQuery is already loading..."))())

Readable source-code is available here

【讨论】：

【参考方案9】：

top answer, by jondavidjohn 很好，但我想对其进行调整以解决几点：

将脚本从http 加载到https 上的页面时，各种浏览器都会发出警告。如果您直接从浏览器的 URL 栏中尝试，将 jquery.com 的协议更改为 https 会导致警告：This is probably not the site you are looking for! 当我使用控制台来试验 Google 网站（例如 Gmail）时，我喜欢使用 Google 的 CDN。

我唯一的问题是我必须在控制台中包含一个我真的总是想要最新的版本号。

var jq = document.createElement('script');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
jQuery.noConflict();

【讨论】：

【参考方案10】：

每this answer:

fetch('https://code.jquery.com/jquery-latest.min.js').then(r => r.text()).then(r => eval(r))

出于某种原因，我必须执行两次才能获得新的“$”（我也必须使用其他方法），但它确实有效。

如果您的浏览器不是那么现代，这是等效的：

fetch('http://code.jquery.com/jquery-latest.min.js').then(function(r)return r.text()).then(function(r)eval(r))

【讨论】：

【参考方案11】：

正如其他答案所解释的那样，手动执行此操作非常容易。但也有jQuerify plug-in。

【讨论】：

+1 - 谢谢肯。 jQuerify 这个词提醒我，我创建了一个书签来执行此操作。我添加了自己的答案，其中包含我使用的代码。我知道我以前做过这个=)。虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review @adamb，不幸的是，随着旧链接衰败的趋势，多年来，我改进其中一些非常古老的答案的时间和动力也随之消散。然而，由于 SO 的设计，我们非常欢迎您自己改进答案——对与熵作斗争的贡献总是受到衷心的赞赏。【参考方案12】：

FWIW，Firebug 嵌入了include 特殊命令，jquery 默认为别名： https://getfirebug.com/wiki/index.php/Include

所以在你的情况下，你只需要输入：

include("jquery");

弗洛伦特

【讨论】：

【参考方案13】：

此答案基于@genesis 答案，起初我尝试了书签版本@jondavidjohn，但它不起作用，所以我将其更改为这个（将其添加到您的书签中）：

javascript:(function()var s = document.createElement('script');s.src = "//code.jquery.com/jquery-2.2.4.min.js";document.getElementsByTagName('head')[0].appendChild(s);console.log('jquery loaded')());

请注意，未在 chrome 中测试，但在 firefox 中工作，未在冲突环境中测试。

【讨论】：

【参考方案14】：

现代浏览器（在 Chrome、Firefox、Safari 上测试）implement some helper functions 使用美元符号 $，与 jQuery 非常相似（如果网站没有使用 window.$ 定义某些内容）。

这些实用程序对于在 DOM 中选择元素和修改它们非常有用。

文档：Chrome、Firefox

【讨论】：

【参考方案15】：

一种最短的方法是将下面的代码复制粘贴到控制台。

var jquery = document.createElement('script'); 
jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.head.appendChild(jquery);

【讨论】：

【参考方案16】：

如果你想为用户脚本做这个，我写了这个：http://userscripts.org/scripts/show/123588

它可以让你包含 jQuery、UI 和任何你想要的插件。我在一个有 1.5.1 且没有 UI 的网站上使用它；这个脚本给了我 1.7.1，加上 UI，在 Chrome 或 FF 中没有冲突。我自己没有测试过 Opera，但其他人告诉我它也适用于他们，所以这应该是一个完整的跨浏览器用户脚本解决方案，如果你需要这样做的话。

【讨论】：

【参考方案17】：

这里是替代代码：

javascript:(function() var url = '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; var n=document.createElement('script');n.setAttribute('language','JavaScript');n.setAttribute('src',url+'?rand='+new Date().getTime());document.body.appendChild(n);)();

可以直接在控制台中粘贴，也可以创建一个新的书签页面（在 Chrome 中右键单击书签栏，添加页面...）并粘贴此代码为 URL。

要测试它是否有效，请参见下文。

之前：

$()
Uncaught TypeError: $ is not a function(…)

之后：

$()
[]

【讨论】：

【参考方案18】：

如果您想在控制台中频繁使用 jQuery，您可以轻松编写用户脚本。首先，如果您使用的是 Chrome，请安装 Tampermonkey；如果您使用的是 Firefox，请安装 Greasemonkey。用这样的使用函数编写一个简单的用户脚本：

var scripts = [];

function use(libname) 
    var src;
    if (scripts.indexOf(libname) == -1) 
        switch (libname.toLowerCase()) 
            case "jquery":
                src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
                break;
            case "angularjs":
                src = "//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js";
                break;
        
     else 
        console.log("Library already in use.");
        return;
    
    if (src) 
        scripts.append(libname);
        var script = document.createElement("script");
        script.src = src;
        document.body.appendChild(scr);
     else 
        console.log("Invalid Library.");
        return;

【讨论】：

【参考方案19】：

交钥匙解决方案：

将您的代码放入yourCode_here 函数中。并防止没有 HEAD 标记的 html。

(function(head) 
  var jq = document.createElement('script');
  jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";
  ((head && head[0]) || document.firstChild).appendChild(jq);
)(document.getElementsByTagName('head'));

function jQueryReady() 
  if (window.jQuery) 
    jQuery.noConflict();
    yourCode_here(jQuery);
   else 
    setTimeout(jQueryReady, 100);
  


jQueryReady();

function yourCode_here($) 
  console.log("OK");
  $("body").html("<h1>Hello world !</h1>");

【讨论】：

【参考方案20】：

直观的单线

document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.1.1.min.js"%3E%3C/script%3E’))

您可以更改src 地址。我提到了ReferenceError: Can't find variable: jQuery

【讨论】：

【参考方案21】：

我建立在公认的解决方案的基础上并使其变得更好

var also_unconflict = typeof $ != "undefined";

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

if(also_unconflict)
    setTimeout(function()
        $=jQuery.noConflict();
        console.log('jquery loaded, use jQuery instead of $')
    , 500)
else
    console.log('jquery loaded, you can use $');

我在 google chrome 控制台 sn-p 中使用了这个功能

【讨论】：

【参考方案22】：

另一种选择是将 jQuery 内容保存在 sn-p(chrome) 中并在您想要的任何站点上运行（右键单击+运行或 CTRL+Enter）它。如果您想按需运行它，它不一定是 jQuery 任何 javascript。（例如：SharePoint JSOM.. 只需将所有 JSOM 文件保存为 sn-ps 并按所需顺序运行）

【讨论】：

以上是关于在 JavaScript 控制台中包含 jQuery的主要内容，如果未能解决你的问题，请参考以下文章

浏览器控制台 - 如何在每个页面重定向中包含javascript代码？

在 SVG 中包含 JavaScript

JavaScript 在XHTML中包含有效的内联Javascript

如何在另一个 JavaScript 文件中包含一个 JavaScript 文件？

在 java servlet 中包含 javascript 的最佳方法

如何在另一个 javascript 文件中包含 jquery [重复]