如何将jquery注入任何网页

Question

有没有办法将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. 使用轮询(typeof jQuery === "function"每隔x毫秒检查一次)
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>