web-dev-qa-db-fra.com

Comment injecter jquery sur n'importe quelle page Web

Existe-t-il un moyen d'injecter jQuery dans n'importe quelle page comme nous le faisons avec javascript (à partir de l'url). avec javascript, nous le faisons

javascript:alert("b");

J'ai essayé mais je ne sais pas pourquoi ça ne marche pas

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

Il s'agit d'un code bookmarklet pour injecter jquery dans n'importe quelle page Web:

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')
})();

pdate: J'ai supprimé la partie http: de l'URL par commentaire @Monkpit, ce qui est très important et évite beaucoup de problèmes.

33
Amr Elgarhy

Comme vous chargez jQuery de manière asynchrone, la variable jQuery n'est pas disponible immédiatement. Cela signifie que vous ne pouvez pas utiliser jQuery sur la ligne suivante; vous devez attendre que le navigateur charge jQuery et l'exécute.

La solution consiste à utiliser l'une des techniques suivantes:

  1. utiliser le délai (supposez que le script se charge après x secondes)
  2. utiliser l'interrogation (cochez typeof jQuery === "function" toutes les x millisecondes)
  3. utilisez le paramètre de rappel (ajoutez une chaîne de requête telle que ?callback=scriptloaded, nécessite une prise en charge côté serveur)
  4. utiliser l'événement onload de l'élément de script comme décrit ci-dessous
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