Come iniettare jquery in qualsiasi pagina web

Question

C'è un modo per iniettare jQuery in qualsiasi pagina come facciamo con javascript (dall'URL). con javascript facciamo questo

javascript:alert("b"); 

ho provato questo, ma non so il motivo per cui non dovesse funzionare

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

Si tratta di un codice di bookmarklet per iniettare jquery in qualsiasi pagina 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') 
})(); 

Aggiornamento: Ho rimosso l'http: parte dall'URL per il commento @Monkpit, che è molto importante e risparmia un sacco di problemi.

Answer 2

Poiché si sta caricando jQuery in modo asincrono, la variabile jQuery non è disponibile immediatamente. Questo significa che non puoi usare jQuery nella riga successiva; devi aspettare fino a quando il browser carica jQuery e lo esegue.

La soluzione è quella di utilizzare una delle seguenti tecniche:

1. uso ritardo (supponiamo che i carichi script dopo x secondi)
2. uso polling (Check typeof jQuery === "function" ogni x millisecondi)
3. uso callback parametro (aggiungere query string come ?callback=scriptloaded, richiede supporto lato server)
4. utilizzare l'evento di script onload evento come descritto di seguito

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>

Answer 3

È dimenticato una virgola nella riga 8. Questo è il codice senza errori:

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); 

È possibile iniettare jQuery in Chrome mettendolo come segnalibro. Basta copiare il codice sopra, creare un nuovo segnalibro di un sito web casuale. Fai clic con il tasto destro sul segnalibro e seleziona "Modifica", incolla il codice nella casella dell'URL e scegli "Salva". Quando fai clic sul segnalibro, verrà iniettato lo script jQuery.

-Lucas