关于javascript：如何将jquery注入任何网页


How to inject jquery to any webpage

本问题已经有最佳答案，请猛点这里访问。

有没有任何方法可以像使用javascript(从url)一样将jquery注入任何页面？使用javascript，我们可以做到这一点

1
javascript:alert("b");

我试过了，但不知道为什么不管用

1
2
3
4
5
6
7
8
9
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的bookmarklet代码：

1
2
3
4
5
6
7
8
9
10
11
12
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')
})();

更新：我删除了url中每个@monkpit注释的http:part，这是非常重要的，并且节省了很多问题。

相关讨论

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

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

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

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    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);
    }
    1
    2
    3
    4
    <p>
    Paragraph
    </p>
    <button onclick="injectScriptAndUse();">Click to load jQuery and change style of the paragraph</button>

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

    1
    2
    3
    4
    5
    6
    7
    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脚本将被注入。

    -卢卡斯