2011-12-14 34 views
10

¿Existe alguna forma programática o tal vez un complemento de navegador que permita a los usuarios ejecutar arbitrariamente cualquier jQuery que deseen en una página web que esté cargada actualmente en su navegador?¿Cómo ejecutar jQuery directamente en cualquier página del navegador?

Editar

Mi motivación es ser capaz de probar la sintaxis de jQuery y los comandos antes de tiempo en una página y luego ir añadirlos a su fuente o sugerir ajustes a los webadmins cuyas páginas he experimentado con.

+0

Hay un complemento para eso en Chrome y puedes usar Greasemonkey para Firefox. No estoy seguro acerca de IE –

+1

Existe la consola de JavaScript incorporada en el navegador (generalmente Ctrl + Shift + J), o [FireBug] (http://getfirebug.com/), o simplemente puede escribir 'javascript: alert ('hola'); 'en la barra de direcciones. Para cargar jQuery, puede usar [jQuerify Bookmarklet] (http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet/). ¿Qué estás tratando de hacer (o prevenir) exactamente? –

Respuesta

3

FireQuery es una gran extensión de Firebug que puede incluir jQuery para usted y desde allí puede usar jQuery en su consola.

"jQuerify: permite que se inyecte jQuery en cualquier página web"

+0

Sé que hay respuestas similares, pero no puedo decir quién respondió primero (así que perdón), solo hice una elección ... este es el enfoque que ayudó. – pulkitsinghal

-1

eval ejecuta cualquier cadena que pase, pero si su uso es 'adecuado' es contested.

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

mostrará una alerta en el documento listo (siempre que jQuery es de origen antes de la eval se llama).

19

Puede usar la consola de Chrome para hacerlo. Si usa Chrome, haga clic con el botón derecho en la página y luego haga clic en "Inspeccionar elemento". Dirígete a la pestaña "Consola" e intenta ejecutar $ === jQuery. Si no obtiene un error y el resultado es true, tiene jQuery.

Si no es así, ejecute el siguiente para agregar jQuery a una página:

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

Después de ejecutar estos comandos, jQuery debe ser cargada en cualquier página web y listo para su uso en la consola :)

El código anterior debería funcionar para cualquier navegador con una consola de JavaScript.

O bien, hay usuarios (como Greasemonkey y FireQuery) que, si jQuery no está incluido en la página, ejecutan automáticamente el código anterior para inyectar jQuery y facilitar el script y piratear las páginas de otras personas.

+0

Además, puede usar mi nuevo usuario, [jQuerify] (http://github.com/rfkrocktk/jQuerify). –

+0

Tus 5 líneas de código aquí funcionan bien para mí. Cuando pego tu código jQuerify en mi consola de Chrome y lo ejecuto, eso no funciona. Estos comentarios no admiten saltos de línea, pero esto es lo que aparece en mi consola que comienza con el "document.getElementsByTagName" en la parte inferior de su jQuerify: document.getElementsByTagName ("body") [0] .appendChild (script) ; } true $ === jQuery ReferenceError: jQuery no está definido – Blaine

2

me escribió un bookmarklet que comprueba el documento para jQuery, lo agrega al <head> si no existe ya, y muestra una notificación (utilizando jQuery) si jQuery se cargó a través del script o ya está presente en el documento. Sólo tiene que añadir este código a sus marcadores para obtener la funcionalidad:

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

Este utiliza el CDN de Google, y es HTTPS, de una línea de usar, y envuelto:

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

Puede especificar la versión jQuery, por ejemplo jQueryVersion="2.0.2".

Todas las versiones se enumeran en developers.google.com/speed/libraries/devguide.

2

Para mayor comodidad a inyectar (e indican que es presense) jQuery en Chrome incluso en la página HTTPS con ningún conflicto modo para Prototipo (indica si prototipo está presente en la página también) Probablemente prefiera jQuerify extensión (jQuerify for Chrome) cuya calidad fue probada por miles de usuarios durante varios años de experiencia. En una frase: "Ahorre su tiempo".

+0

Esto! No estoy seguro de por qué esto no tiene una calificación más alta simplemente lo probé y es absolutamente fantástico para probar una línea o 2 en una página. ¡Gracias! – Sam

+0

¡Gracias por las palabras de agradecimiento! Estoy tan feliz de que te guste. – Intervoice

+0

No hay problema Ojalá hubiera encontrado algo así antes, el número de veces que me he sentado rascándome la cabeza porque un selector estaba equivocado y estoy pegando todas estas líneas de console.log para intentar averiguar qué está roto exactamente, y cuando se trabaja en sitios web en vivo y no localmente, esto ahorra una tonelada de tiempo sin tener que volver a cargar archivos y hacer una actualización de caché. – Sam

Cuestiones relacionadas