para - llamar javascript desde html

Incluir jQuery en la consola de JavaScript

Question

¿Hay una manera fácil de incluir jQuery en la consola de Chrome JavaScript para los sitios que no lo usan? Por ejemplo, en un sitio web me gustaría obtener el número de filas en una tabla. Sé que esto es realmente fácil con jQuery.

$(''element'').length;

El sitio no utiliza jQuery. ¿Puedo agregarlo desde la línea de comandos?

Answer 1

Solución llave en mano:

Ponga su código en la función yourCode_here . Y evitar HTML sin etiqueta HEAD.

(function(head) {
  var jq = document.createElement(''script'');
  jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js";
  ((head && head[0]) || document.firstChild).appendChild(jq);
})(document.getElementsByTagName(''head''));

function jQueryReady() {
  if (window.jQuery) {
    jQuery.noConflict();
    yourCode_here(jQuery);
  } else {
    setTimeout(jQueryReady, 100);
  }
}

jQueryReady();

function yourCode_here($) {
  console.log("OK");
  $("body").html("<h1>Hello world !</h1>");
}

Answer 2

A partir de Chrome v.70, jQuery se carga a través de la fuente y está listo cuando su página está. Simplemente escriba directamente en la consola del desarrollador y se analizará el script.

Answer 3

Acabo de crear un marcador de jQuery 3.2.1 con manejo de errores (solo carga si aún no está cargada, detecta versión si ya está cargada, mensaje de error si hay error al cargar). Probado en Chrome 27. No hay ninguna razón para usar el "antiguo" jQuery 1.9.1 en el navegador Chrome, ya que jQuery 2.0 es compatible con la API 1.9 .

Simplemente ejecuta lo siguiente en la consola de desarrolladores de Chrome o arrástralo y suéltalo en tu barra de marcadores :

javascript:((function(){if(typeof(jQuery)=="undefined"){window.jQuery="loading";var a=document.createElement("script");a.type="text/javascript";a.src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js";a.onload=function(){console.log("jQuery "+jQuery.fn.jquery+" loaded successfully.")};a.onerror=function(){delete jQuery;alert("Error while loading jQuery!")};document.getElementsByTagName("head")[0].appendChild(a)}else{if(typeof(jQuery)=="function"){alert("jQuery ("+jQuery.fn.jquery+") is already loaded!")}else{alert("jQuery is already loading...")}}})())

El código fuente legible está disponible aquí

Answer 4

Agregando a la respuesta de @jondavidjohn, también podemos establecerlo como un marcador con la URL como el código javascript.

Nombre: Incluir Jquery

Url:

javascript:var jq = document.createElement(''script'');jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";document.getElementsByTagName(''head'')[0].appendChild(jq); setTimeout(function() {jQuery.noConflict(); console.log(''jQuery loaded''); }, 1000);void(0);

y luego agréguelo a la barra de herramientas de Chrome o Firefox para que, en lugar de pegar el script una y otra vez, podamos hacer clic en el marcador.

Answer 5

Aquí está el código alternativo:

javascript:(function() {var url = ''//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js''; var n=document.createElement(''script'');n.setAttribute(''language'',''JavaScript'');n.setAttribute(''src'',url+''?rand=''+new Date().getTime());document.body.appendChild(n);})();

que se puede pegar directamente en la Consola o crear una nueva página de marcadores (en Chrome, haga clic con el botón derecho en la barra de marcadores , Agregar página ... ) y pegue este código como URL.

Para probar si eso funcionó, ver más abajo.

Antes de:

$()
Uncaught TypeError: $ is not a function(…)

Después:

$()
[]

Answer 6

Copie el contenido del archivo code.jquery.com/jquery-latest.min.js y péguelo en la consola. Funciona perfecto.

Answer 7

Ejecuta esto en la consola de JavaScript de tu navegador, entonces jQuery debería estar disponible ...

var jq = document.createElement(''script'');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName(''head'')[0].appendChild(jq);
// ... give time for script to load, then type (or see below for non wait option)
jQuery.noConflict();

NOTA: si el sitio tiene scripts que entran en conflicto con jQuery (otras librerías, etc.), aún podría tener problemas.

Actualizar:

Mejorando lo mejor, crear un Marcador lo hace realmente conveniente, hagámoslo, y un poco de retroalimentación también es genial:

1. Haga clic derecho en la barra de marcadores y haga clic en Agregar página
2. Nómbrelo como desee, por ejemplo, Inyectar jQuery, y use la siguiente línea para URL:

javascript: (función (e, s) {e.src = s; e.onload = función () {jQuery.noConflict (); console.log (''jQuery inyected'')}; document.head.appendChild (e); }) (document.createElement (''script''), ''// code.jquery.com/jquery-latest.min.js'')

A continuación se muestra el código formateado:

javascript: (function(e, s) {
    e.src = s;
    e.onload = function() {
        jQuery.noConflict();
        console.log(''jQuery injected'');
    };
    document.head.appendChild(e);
})(document.createElement(''script''), ''//code.jquery.com/jquery-latest.min.js'')

Aquí se usa la URL oficial de jQuery CDN, siéntase libre de usar su propia versión / CDN.

Answer 8

Ejecuta esto en tu consola

var script = document.createElement(''script'');script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";document.getElementsByTagName(''head'')[0].appendChild(script);

Crea una nueva etiqueta de script, la llena con jQuery y se agrega a head

Answer 9

Es bastante fácil hacerlo manualmente, como explican las otras respuestas. Pero también está el complemento jQuerify .

Answer 10

FWIW, Firebug incrusta el comando especial de include , y jquery tiene un alias por defecto: https://getfirebug.com/wiki/index.php/Include

Así que en tu caso, solo tienes que escribir:

include("jquery");

Florent

Answer 11

La respuesta principal, por jondavidjohn, es buena, pero me gustaría modificarla para abordar un par de puntos:

• Varios navegadores emiten una advertencia al cargar un script de http a una página en https .
• Si cambia el protocolo de jquery.com a https jquery.com una advertencia si lo intenta directamente desde la barra de URL del navegador: ¡ This is probably not the site you are looking for!
• Me gusta usar el CDN de Google cuando uso la consola para experimentar con sitios de Google como Gmail.

Mi único problema es que tengo que incluir un número de versión donde, en la consola, siempre quiero la última versión.

var jq = document.createElement(''script'');
jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js";
document.getElementsByTagName(''head'')[0].appendChild(jq);
jQuery.noConflict();

Answer 12

Por esta respuesta :

fetch(''https://code.jquery.com/jquery-latest.min.js'').then(r => r.text()).then(r => eval(r))

Por alguna razón, tengo que ejecutarlo dos veces para obtener el nuevo ''$'' (que también tengo que ver con los otros métodos), pero funciona.

Este es el equivalente si su navegador no es tan moderno:

fetch(''http://code.jquery.com/jquery-latest.min.js'').then(function(r){return r.text()}).then(function(r){eval(r)})

Answer 13

Si desea utilizar jQuery con frecuencia desde la consola, puede escribir fácilmente un script de usuario. Primero, instale Tampermonkey si está en Chrome y Greasemonkey si está en Firefox. Escribe un script de usuario simple con una función de uso como esta:

var scripts = [];

function use(libname) {
    var src;
    if (scripts.indexOf(libname) == -1) {
        switch (libname.toLowerCase()) {
            case "jquery":
                src = "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
                break;
            case "angularjs":
                src = "//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js";
                break;
        }
    } else {
        console.log("Library already in use.");
        return;
    }
    if (src) {
        scripts.append(libname);
        var script = document.createElement("script");
        script.src = src;
        document.body.appendChild(scr);
    } else {
        console.log("Invalid Library.");
        return;
    }
}

Answer 14

Si estás buscando hacer esto para un script de usuario, escribí esto: http://userscripts.org/scripts/show/123588

Te permitirá incluir jQuery, además de la interfaz de usuario y cualquier complemento que desees. Lo estoy usando en un sitio que tiene 1.5.1 y no hay interfaz de usuario; esta secuencia de comandos me da 1.7.1 en su lugar, además de la interfaz de usuario, y no hay conflictos en Chrome o FF. Yo no he probado Opera, pero otros me han dicho que también ha funcionado allí para ellos, por lo que esta debería ser una solución completa de script de usuario para todos los navegadores, si es para eso que necesita hacer esto.

Answer 15

Soy un rebelde.

Solución: no use jQuery. jQuery es una biblioteca para abstraer las inconsistencias de DOM en todos los navegadores. Ya que estás en tu propia consola, no necesitas este tipo de abstracción.

Para su ejemplo:

$$(''element'').length

( $$ es un alias para document.querySelectorAll en la consola).

Para cualquier otro ejemplo: estoy seguro de que puedo encontrar cualquier cosa. Especialmente si está utilizando un navegador moderno (Chrome, FF, Safari, Opera).

Además, saber cómo funciona el DOM no perjudicaría a nadie, solo aumentaría tu nivel de jQuery (sí, aprender más sobre javascript te hace mejor en jQuery).

Answer 16

Una de las formas más cortas sería copiar y pegar el siguiente código en la consola.

var jquery = document.createElement(''script''); 
jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.head.appendChild(jquery);

Answer 17

Usa el folleto de jQueryify:

http://marklets.com/jQuerify.aspx

En lugar de copiar y pegar el código en las otras respuestas, esto lo convertirá en un marcador seleccionable.

Answer 18

esta respuesta basada en @genesis responde, al principio probé la versión del marcador @jondavidjohn, y no está funcionando, así que la cambio a esta (añádala a su marcador):

javascript:(function(){var s = document.createElement(''script'');s.src = "//code.jquery.com/jquery-2.2.4.min.js";document.getElementsByTagName(''head'')[0].appendChild(s);console.log(''jquery loaded'')}());

palabras de precaución, no se ha probado en Chrome sino que funciona en Firefox y no se ha probado en un entorno de conflicto.

Answer 19

intuitivo de una sola línea

document.write(unescape(''%3Cscript src="https://code.jquery.com/jquery-3.1.1.min.js"%3E%3C/script%3E’))

Puede cambiar la dirección src .
Me referí a ReferenceError: No se puede encontrar la variable: jQuery