有没有一种简单的方法可以在Chrome JavaScript控制台中为不使用它的网站添加jQuery?例如,在网站上我想获取表格中的行数。我知道jQuery非常简单。
$('element').length;
该网站不使用jQuery。我可以从命令行添加吗?
在浏览器的JavaScript控制台中运行它,然后jQuery应该可用...
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/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 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 /版本。
正如其他答案所解释的那样,手动执行此操作非常容易。但也有jQuerify plug-in。
FWIW,Firebug嵌入了include
特殊命令,jquery默认别名:https://getfirebug.com/wiki/index.php/Include
所以在你的情况下,你只需要输入:
include("jquery");
弗洛朗
这个答案基于@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中工作,而不是在冲突环境中测试。
最简单的方法之一就是将下面的代码复制粘贴到控制台。
var jquery = document.createElement('script');
jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.head.appendChild(jquery);
如果你想为一个用户脚本做这个,我写了这个:http://userscripts.org/scripts/show/123588
它会让你包括jQuery,以及你想要的UI和任何插件。我在具有1.5.1且没有UI的网站上使用它;这个脚本给了我1.7.1而不是UI,在Chrome或FF中没有冲突。我自己没有测试过Opera,但是其他人告诉我它也适用于他们,所以这应该是一个完整的跨浏览器用户脚本解决方案,如果你需要这样做的话。
如果您想从控制台经常使用jQuery,您可以轻松编写用户脚本。首先,如果您使用的是Chrome和Greasemonkey,请安装Tampermonkey。使用如下使用函数编写一个简单的用户脚本:
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;
}
}
这是替代代码:
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(…)
后:
$()
[]
直观的单行
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
将您的代码放在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>");
}
现代浏览器(在Chrome,Firefox,Safari上测试)implement some helper functions使用与jQuery非常相似的美元符号$
(如果网站没有使用window.$
定义某些内容)。
这些实用程序对于选择DOM中的元素并对其进行修改非常有用。
在您的控制台中运行它
var script = document.createElement('script');script.src = "https://code.jquery.com/jquery-3.4.1.min.js";document.getElementsByTagName('head')[0].appendChild(script);
它创建一个新的脚本标记,用jQuery填充它并附加到头部。
复制以下内容: https://code.jquery.com/jquery-3.4.1.min.js
并将其粘贴到控制台中。完美的工作。
添加到@ 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的工具栏中,这样我们就可以反复点击书签,而不是一次又一次地粘贴脚本。
我是反叛者。
解决方案:不要使用jQuery。 jQuery是一个用于抽象浏览器中DOM不一致的库。由于您在自己的控制台中,因此不需要这种抽象。
对于你的例子:
$$('element').length
($$
是控制台中document.querySelectorAll
的别名。)
对于任何其他例子:我相信我能找到任何东西。特别是如果您使用的是现代浏览器(Chrome,FF,Safari,Opera)。
此外,了解DOM如何工作不会伤害任何人,它只会增加你的jQuery级别(是的,了解更多关于javascript使你在jQuery上更好)。
我刚刚制作了一个带有错误处理的jQuery 3.2.1 bookmarklet(如果尚未加载则仅加载,如果已加载则检测版本,加载时出错时出现错误消息)。在Chrome 27中测试过。自jQuery 2.0 is API-compatible with 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...")}}})())
top answer, by jondavidjohn很好,但我想调整它来解决几点:
http
中的脚本加载到https
上的页面时,各种浏览器会发出警告。jquery.com
的协议更改为https
就会发出警告,如果您直接从浏览器的URL栏中尝试:This is probably not the site you are looking for!
我唯一的问题是我必须在控制台中包含一个版本号,我总是想要最新版本。
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();
对于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)})