web-dev-qa-db-ja.com

jqueryをWebページに挿入する方法

Javascript（from 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);
javascriptjquerycode-injection
22
elti musa

これは、任意のWebページに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('//code.jquery.com/jquery-3.2.1.min.js', 'jquery')
})();

更新： @MonkpitコメントごとにURLからhttp：部分を削除しました。これは非常に重要であり、多くの問題を解決します。

33
Amr Elgarhy

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>
10
Salman A