Question Inclure jQuery dans la console JavaScript


Existe-t-il un moyen simple d'inclure jQuery dans la console JavaScript Chrome pour les sites qui ne l'utilisent pas? Par exemple, sur un site Web, j'aimerais obtenir le nombre de lignes dans une table. Je sais que c'est vraiment facile avec jQuery.

$('element').length;

Le site n'utilise pas jQuery. Puis-je l'ajouter depuis la ligne de commande?


618
2017-09-19 16:42


origine


Réponses:


Exécutez ceci dans la console JavaScript de votre navigateur, puis jQuery devrait être 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();

REMARQUE: Si le site a des scripts en conflit avec jQuery (autres bibliothèques, etc.), vous pouvez toujours rencontrer des problèmes.

Mettre à jour:

Faire le meilleur, créer un signet le rend vraiment pratique, faisons-le, et un peu de rétroaction, c'est bien aussi:

  1. Cliquez avec le bouton droit sur la barre de favoris, puis cliquez sur Ajouter une page
  2. Nommez-le comme vous voulez, par ex. Injectez jQuery et utilisez la ligne suivante pour l'URL:

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

Voici le code formaté:

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

Ici, l'URL officielle de jQuery CDN est utilisée, n'hésitez pas à utiliser votre propre version CDN /.


1119
2017-09-19 16:44



Exécutez ceci dans votre console

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

Il crée une nouvelle balise de script, la remplit avec jQuery et ajoute à la tête


179
2017-09-19 16:45



Utilisez le livret jQueryify:

http://marklets.com/jQuerify.aspx

Au lieu de copier coller le code dans les autres réponses, cela en fera un signet cliquable.


62
2017-09-19 16:57



Copie http://code.jquery.com/jquery-latest.min.js déposer le contenu et le coller dans la console. Fonctionne parfaitement.


58
2017-11-22 11:34



Ajoutant à la réponse de @ jondavidjohn, nous pouvons également le définir comme un signet avec URL comme le code javascript.

Prénom: Inclure 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);

puis ajoutez-le à la barre d'outils de Chrome ou Firefox afin que, au lieu de coller le script encore et encore, nous pouvons simplement cliquer sur le bookmarklet.

Screenshot of bookmark


27
2018-05-23 12:02



Je suis une rebelle.

Solution: n'utilisez pas jQuery. jQuery est une bibliothèque permettant d'abstraire les inconcurrences DOM dans les navigateurs. Puisque vous êtes dans votre propre console, vous n'avez pas besoin de ce genre d'abstraction.

Pour votre exemple:

$$('element').length

($$ est un alias à document.querySelectorAll dans la console.)

Pour tout autre exemple: je suis sûr que je peux trouver quelque chose. Surtout si vous utilisez un navigateur moderne (Chrome, FF, Safari, Opera).

De plus, le fait de savoir comment fonctionne le DOM ne ferait de mal à personne, cela ne ferait qu'augmenter votre niveau de jQuery (oui, en savoir plus sur javascript vous rend mieux à jQuery).


22
2018-04-06 20:08



Je viens de créer un bookmarklet jQuery 3.2.1 avec gestion des erreurs (uniquement chargement si pas déjà chargé, détection de la version si déjà chargée, message d'erreur si erreur lors du chargement). Testé dans Chrome 27. Il n'y a aucune raison d'utiliser le "vieux" jQuery 1.9.1 sur le navigateur Chrome depuis jQuery 2.0 est compatible avec l'API avec 1.9.

Il suffit de lancer ce qui suit dans la console de développeur de Chrome ou faites-le glisser dans votre barre de favoris:

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...")}}})())

Le code source lisible est disponible ici


12
2018-05-24 12:31



le top réponse, par jondavidjohn est bon mais j'aimerais le modifier pour répondre à quelques points:

  • Divers navigateurs émettent un avertissement lors du chargement d'un script http à une page sur https.
  • Changement juste jquery.comLe protocole de https entraîne un avertissement si vous l'essayez directement à partir de la barre d'adresse du navigateur: This is probably not the site you are looking for!
  • J'aime utiliser le CDN de Google lorsque j'utilise la console pour tester des sites Google tels que Gmail.

Mon seul problème est que je dois inclure un numéro de version où dans la console, je veux toujours le dernier.

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

7
2017-11-18 01:36



C'est assez facile à faire manuellement, comme l'expliquent les autres réponses. Mais il y a aussi Plug-in jQuerify.


5
2017-09-19 16:50



FWIW, Firebug intègre le include commande spéciale, et jquery est aliasé par défaut: https://getfirebug.com/wiki/index.php/Include

Donc dans votre cas, il vous suffit de taper:

include("jquery");

Florent


5
2017-10-16 21:21



Par cette réponse:

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

Pour une raison quelconque, je dois l'exécuter deux fois pour obtenir le nouveau '$' (que j'ai à faire avec les autres méthodes), mais cela fonctionne.

C'est l'équivalent si votre navigateur n'est pas si moderne:

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

4
2017-08-09 09:40