如何将jquery注入任何网页

有没有办法将jQuery注入任何页面，就像我们使用javascript（来自url）一样。 用javascript我们这样做

javascript:alert("b"); 

我试过这个，但我不知道为什么它不起作用

 javascript:var x = document.getElementsByTagName("head")[0]; var y = document.createElement("script"); y.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"; x.appendChild(y); var a = document.getElementsByTagName("body")[0]; var b = document.createElement("script"); b.innerHTML = "$('p').css('border','3px solid red')" a.appendChild(b); 

Answer 1

这是一个用于在任何网页中注入jquery的bookmarklet代码：

 javascript:(function() { function l(u, i) { var d = document; if (!d.getElementById(i)) { var s = d.createElement('script'); s.src = u; s.id = i; d.body.appendChild(s); } } l('//code.jquery.com/jquery-3.2.1.min.js', 'jquery') })(); 

更新：我从每个@Monkpit评论的URL中删除了http：部分，这非常重要并且可以节省很多问题。

Answer 2

由于您是异步加载jQuery，因此jQuery变量不会立即可用。 这意味着你不能在下一行使用jQuery; 你需要等到浏览器加载jQuery并执行它。

解决方案是使用以下技术之一：

1. 使用延迟（假设脚本在x秒后加载）
2. 使用轮询（每x毫秒检查一次typeof jQuery === "function" ）
3. 使用回调参数（追加查询字符串，如?callback=scriptloaded ，需要服务器端支持）
4. 使用脚本元素的onload事件，如下所述

 function injectScriptAndUse() { var head = document.getElementsByTagName("head")[0]; var script = document.createElement("script"); script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"; script.onload = function() { $("p").css("border", "3px solid red"); }; head.appendChild(script); } 

 
Paragraph
 Click to load jQuery and change style of the paragraph 

Answer 3

你在第8行忘记了一个分号。这是没有错误的代码：

 javascript:var x = document.getElementsByTagName("head")[0]; var y = document.createElement("script"); y.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"; x.appendChild(y); var a = document.getElementsByTagName("body")[0]; var b = document.createElement("script"); b.innerHTML = "$('p').css('border','3px solid red')"; a.appendChild(b); 

你可以把它作为书签在Chrome中注入jQuery。 只需复制上面的代码，创建一个随机网站的新书签。 右键单击书签并选择“编辑”，将代码粘贴到URL框中，然后选择“保存”。 当您单击书签时，将注入jQuery脚本。

-Lucas