在JavaScript控制台中包含jQuery

Question

有没有一种简单的方法可以在Chrome JavaScript控制台中为不使用它的网站添加jQuery？例如,在网站上我想获取表格中的行数.我知道jQuery非常简单.

$('element').length;

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

Answer 1

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

var jq = document.createElement('script');
jq.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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(其他库等)冲突,您仍然可能遇到问题.

更新:

做得更好,创建一个书签使它非常方便,让我们这样做,一些反馈也很棒:

1. 右键单击"书签栏",然后单击" 添加页面"
2. 根据需要命名,例如Inject jQuery,并对URL使用以下行:

javascript :( function(e,s){e.src = s; e.onload = function(){jQuery.noConflict(); console.log('jQuery inject')}; document.head.appendChild(e); })(使用document.createElement( '脚本'), '// 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 /版本.

Answer 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填充它并附加到头部.

Answer 3

复制http://code.jquery.com/jquery-latest.min.js文件内容并将其粘贴到控制台中.工作完美.

Answer 4

使用jQueryify小册子:

http://marklets.com/jQuerify.aspx

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

Answer 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的工具栏中,这样我们就可以反复点击书签,而不是一次又一次地粘贴脚本.

Answer 6

我是反叛者.

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

对于你的例子:

$$('element').length

($$是document.querySelectorAll控制台中的别名.)

对于任何其他例子:我相信我能找到任何东西.特别是如果您使用的是现代浏览器(Chrome,FF,Safari,Opera).

此外,了解DOM如何工作不会伤害任何人,它只会增加你的jQuery级别(是的,了解更多关于javascript使你在jQuery上更好).

Answer 7

2020 年后方法，使用：

• 动态导入
• 自执行 IIFE
• 异步函数
• 箭头函数

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

如果没有异步， import 会返回一个Promise，我们必须使用.then()：

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

另一个例子

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

Answer 8

我刚刚制作了一个带有错误处理的jQuery 3.2.1 bookmarklet(如果尚未加载则仅加载,如果已加载则检测版本,加载时出错时出现错误消息).在Chrome浏览器中测试过27.由于jQuery 2.0与1.9兼容,因此没有理由在Chrome浏览器上使用"旧"jQuery 1.9.1 .

只需在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)}else{if(typeof(jQuery)=="function"){alert("jQuery ("+jQuery.fn.jquery+") is already loaded!")}else{alert("jQuery is already loading...")}}})())

此处提供可读源代码

Answer 9

jondavidjohn的最佳答案是好的,但我想调整它以解决几个问题:

• 从脚本加载http到页面时,各种浏览器会发出警告https.
• 如果您直接从浏览器的URL栏中尝试,只需更改jquery.com协议即可https发出警告:This is probably not the site you are looking for!
• 当我使用控制台试验Gmail等Google网站时,我喜欢使用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();

Answer 10

根据这个答案:

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

Answer 11

正如其他答案所解释的那样,手动执行此操作非常容易.但也有jQuerify插件.

Answer 12

FWIW,Firebug嵌入了include特殊命令,默认情况下jquery是别名:https: //getfirebug.com/wiki/index.php/Include

所以在你的情况下,你只需要输入:

include("jquery");

弗洛朗