javascript - title js

Cómo inyectar jquery a cualquier página web

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo incluyo un archivo JavaScript en otro archivo JavaScript? 54 respuestas

¿Hay alguna manera de inyectar jQuery en cualquier página como lo hacemos con javascript (desde url). con javascript hacemos esto

javascript:alert("b");

Intenté esto, pero no sé por qué no funciona

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

Dado que está cargando jQuery de forma asíncrona, la variable jQuery no está disponible de inmediato. Esto significa que no puede usar jQuery en la siguiente línea; debe esperar hasta que el navegador cargue jQuery y lo ejecute.

La solución es utilizar una de las siguientes técnicas:

1. usar retraso (asuma que el script se carga después de x segundos)
2. use polling (marque typeof jQuery === "function" cada x milisegundos)
3. use el parámetro de devolución de llamada (agregue una cadena de consulta como ?callback=scriptloaded , requiere soporte del lado del servidor)
4. use el evento onload del elemento del script como se describe a continuación

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 2

Este es un código de bookmarklet para inyectar jquery en cualquier página 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'')
})();

Actualización: eliminé la parte http: part de la URL por @Monkpit comentario, lo cual es muy importante y ahorra muchos problemas.

Answer 3

Olvidó un punto y coma en la fila 8. Este es el código sin errores:

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

Puedes inyectar jQuery en Chrome poniéndolo como un marcador. Simplemente copie el código de arriba, cree un nuevo marcador de un sitio web aleatorio. Haga clic derecho en el marcador y elija ''Editar'', pegue el código en el cuadro de URL y elija ''Guardar''. Al hacer clic en el marcador, se inyectará el script jQuery.

-Lucas