2011-12-14 9 views
10

C'è qualche modo programmatico o forse un plugin per il browser che consente agli utenti di eseguire arbitrariamente qualsiasi jQuery che desiderano su una pagina web che è attualmente caricata nel loro browser?Come eseguire jQuery direttamente su qualsiasi pagina del browser?

Modifica

La mia motivazione è quella di essere in grado di testare la sintassi jQuery e comandi prima del tempo su una pagina e poi andare aggiungerli alla sua fonte o suggerire modifiche alle Gli amministratori web le cui pagine ho sperimentato.

+0

C'è un plugin per questo in Chrome e potresti usare Greasemonkey per firefox. Non sono sicuro di IE –

+1

C'è la console JavaScript integrata del browser (in genere Ctrl + Maiusc + J) o [FireBug] (http://getfirebug.com/), oppure puoi semplicemente digitare 'javascript: alert ('ciao'); 'nella barra degli indirizzi. Per caricare jQuery, puoi utilizzare [jQuerify Bookmarklet] (http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet/). Che cosa stai cercando di fare (o prevenire) esattamente? –

risposta

3

FireQuery è una grande estensione di Firebug che può includere jQuery per te e da lì puoi usare jQuery nella tua console.

"jQuerify: consente di iniettare jQuery in qualsiasi pagina web"

+0

So che ci sono risposte simili ma non posso dire chi ha risposto per primo (quindi scusami), ho appena fatto una scelta ... questo è l'approccio che mi ha aiutato. – pulkitsinghal

-1

eval esegue qualsiasi stringa che si passa, ma se il suo utilizzo è "corretto" è contested.

eval('$(function() { alert("hello"); }'); 

mostrerà un avviso sul documento pronto (a condizione che jQuery è di provenienza prima della eval si chiama).

19

È possibile utilizzare la console di Chrome per farlo. Se utilizzi Chrome, fai clic con il pulsante destro sulla pagina, poi fai clic su "Ispeziona elemento". Vai alla scheda "Console" e prova a eseguire $ === jQuery. Se non ricevi un errore e il risultato è true, hai jQuery.

In caso contrario, eseguire il seguente per aggiungere jQuery per una pagina:

var body = document.getElementsByTagName("body")[0]; 
var script = document.createElement('script'); 
script.type = "text/javascript"; 
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"; 
body.appendChild(script); 

Dopo aver eseguito questi comandi, jQuery dovrebbe essere caricato in qualsiasi pagina web e pronto per l'uso nella console :)

Il codice sopra dovrebbe funzionare per qualsiasi browser con una console JavaScript.

In alternativa, ci sono script utente (come Greasemonkey e FireQuery) che, se jQuery non è incluso nella pagina, eseguono automaticamente il codice sopra per iniettare jQuery per semplificare la scrittura e l'hacking sulle pagine di altre persone.

+0

Inoltre, è possibile utilizzare il mio nuovo userscript, [jQuerify] (http://github.com/rfkrocktk/jQuerify). –

+0

Le 5 righe di codice qui funzionano alla grande per me. Quando incollo il codice jQuerify nella mia console di Chrome e lo eseguo, non funziona. Questi commenti non supportano interruzioni di riga, ma ecco cosa appare nella mia console che inizia con "document.getElementsByTagName" nella parte inferiore di jQuerify: document.getElementsByTagName ("body") [0] .appendChild (script) ; } true $ === jQuery RiferimentoErrore: jQuery non definito – Blaine

2

ho scritto un bookmarklet che controlla il documento per jQuery, lo aggiunge alla <head> se non esiste già, e visualizza una notifica (usando jQuery) se jQuery è stato caricato tramite lo script o già presente nel documento. Basta aggiungere il codice ai tuoi preferiti per ottenere la funzionalità:

javascript: (function() 
{ 
    var body = document.getElementsByTagName("body")[0]; 
    var head = document.getElementsByTagName("head")[0]; 
    var el = document.createElement('div'); 
    el.id = 'jqbkstatusnote'; 
    el.style.position = 'fixed'; 
    el.style.top = '10px'; 
    el.style.left = '10px'; 
    el.style.textAlign = 'center'; 
    el.style.color = '#fff'; 
    el.style.padding = '3px'; 
    el.style.fontWeight = 'bold'; 
    el.style.display = 'none'; 
    el.style.zIndex = '999999999'; 
    el.style.boxShadow = '0px 0px 0px 1px #fff, 3px 3px 1px rgba(0,0,0,0.5)'; 
    if (typeof jQuery != 'function') 
    { 
     var script = document.createElement('script'); 
     script.type = "text/javascript"; 
     script.src = "http://code.jquery.com/jquery-latest.min.js"; 
     head.appendChild(script); 
     waitForJQ();   
    } 
    else 
    { 
     el.style.border = '1px solid #522'; 
     el.style.backgroundColor = '#744'; 
     el.innerHTML = 'jQuery already exists in this document!'; 
     body.appendChild(el); 
     jQuery('#jqbkstatusnote').fadeIn().delay(1000).fadeOut(function(){jQuery(this).remove();}); 
    } 
    function waitForJQ() 
    { 
     if (typeof jQuery != 'function') 
     { 
      window.setTimeout(waitForJQ, 100); 
     } 
     else 
     { 
      el.style.border = '1px solid #235'; 
      el.style.backgroundColor = '#457'; 
      el.innerHTML = 'jQuery added to document!'; 
      body.appendChild(el); 
      jQuery('#jqbkstatusnote').fadeIn().delay(1000).fadeOut(function(){jQuery(this).remove();}); 
     } 
    } 
})(); 
11

Questo utilizza Google CDN, ed è HTTPs amichevole, una riga, e avvolto:

(function(){var jQueryVersion="1";var a=document.createElement("script");a.src="//ajax.googleapis.com/ajax/libs/jquery/"+jQueryVersion+"/jquery.js";a.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(a);})() 

È possibile specificare la versione di jQuery, ad es jQueryVersion="2.0.2".

Tutte le versioni sono elencate allo developers.google.com/speed/libraries/devguide.

2

Per comodità di iniettare (e indicano che è presense) jQuery in Chrome anche nella pagina HTTPS con no-conflitto modalità di Prototype (indica se Prototype è presente sulla pagina troppo) Probabilmente si preferisce l'estensione jQuerify (jQuerify for Chrome) di cui è stata dimostrata la qualità da migliaia di utenti durante diversi anni di esperienza. In una frase: "Risparmia tempo".

+0

Questo! Non sono sicuro del motivo per cui questo non è valutato più alto appena provato e è assolutamente fantastico per testare una linea o 2 su una pagina. Grazie! – Sam

+0

Grazie per le parole di apprezzamento! Sono così felice che ti piaccia. – Intervoice

+0

Nessun problema Vorrei aver trovato qualcosa di simile prima, il numero di volte in cui mi sono messo a graffiare la testa perché un selettore era sbagliato e sto incollando tutte le righe di console.log per cercare di scoprire cosa è esattamente rotto, e quando si lavora su siti Web live e non localmente, si risparmia un sacco di tempo senza dover ricaricare i file e fare un aggiornamento della cache. – Sam

Problemi correlati