如何将jquery注入任何网页

How to inject jquery to any webpage

本文关键字：任何 网页 注入 jquery      更新时间：2023-09-26

是否有任何方法可以像我们使用javascript（从url）那样将jQuery注入任何页面。使用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);

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

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('//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', 'jquery')
})();

更新：我根据@Monkpit的评论从URL中删除了http:部分，这非常重要，节省了很多问题。

由于异步加载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);
}
<p>Paragraph</p>
<button onclick="injectScriptAndUse();">Click to load jQuery and change style of the paragraph</button>

您忘记了第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);

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

-Lucas

相关文章：