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 un tableau. Je sais que c'est très simple avec jQuery.
$('element').length;
Le site n'utilise pas jQuery. Puis-je l'ajouter à partir de la ligne de commande?
Exécutez ceci dans la console JavaScript de votre navigateur, alors 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 comporte des scripts en conflit avec jQuery (autres bibliothèques, etc.), vous pouvez toujours rencontrer des problèmes.
Faire le meilleur meilleur, créer un marque-photo rend vraiment pratique, faisons-le, et un petit commentaire est génial aussi:
Javascript: (function (e, s) {e.src = s; e.onload = function () {jQuery.noConflict (); console.log ('jQuery injecté')}; document.head.appendChild (e); }) (Document.createElement ('script'), '// code.jquery.com/jquery-latest.min.js')
Ci-dessous 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 jQuery CDN est utilisée, n'hésitez pas à utiliser votre propre version CDN /.
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 étiquette de script, la remplit de jQuery et ajoute à la tête
Utilisez la brochure jQueryify:
http://marklets.com/jQuerify.aspx
Au lieu de copier le code dans les autres réponses, cela en fera un marque-page cliquable.
Copiez le contenu du fichier http://code.jquery.com/jquery-latest.min.js et collez-le dans la console. Fonctionne parfaitement.
En ajoutant à la réponse de @ jondavidjohn, nous pouvons également le définir comme un marque-page avec l'URL comme code javascript.
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.
Je suis un rebelle.
Solution: n'utilisez pas jQuery. JQuery est une bibliothèque pour abstraire les inconcilios de DOM sur les navigateurs. Comme vous êtes dans votre propre console, vous n'avez pas besoin de ce genre d'abstraction.
Pour votre exemple:
$$('element').length
( $$
est un alias pour document.querySelectorAll
dans la console.)
Pour tout autre exemple: je suis sûr de pouvoir trouver quelque chose. Surtout si vous utilisez un navigateur moderne (Chrome, FF, Safari, Opera).
En outre, savoir comment fonctionne le DOM ne nuirait à personne, cela augmenterait votre niveau de jQuery (oui, en apprenant plus sur javascript vous rend mieux chez jQuery).
Je viens de créer un bookmarklet jQuery 3.2.1 avec une gestion des erreurs (ne chargez que s'il est déjà chargé, détecte la version si déjà chargé, message d'erreur si erreur lors du chargement). Testé sur Chrome 27. Il n'y a aucune raison d'utiliser l'ancien jQuery 1.9.1 sur le navigateur Chrome puisque jQuery 2.0 est compatible avec l'API avec 1.9 .
Il suffit d'exécuter ce qui suit dans la console de développeur de Chrome ou de le glisser dans la barre de signets :
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
La réponse principale, par jondavidjohn, est bonne, mais j'aimerais la régler pour aborder quelques points:
http
vers une page sur https
. jquery.com
changement du protocole de jquery.com
sur https
entraîne un avertissement si vous l'essayez directement à partir de la barre d'URL du navigateur: This is probably not the site you are looking for!
Mon seul problème, c'est que je dois inclure un numéro de version où dans la console, je veux toujours avoir 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();
Il est assez facile de le faire manuellement, comme l'expliquent les autres réponses. Mais il y a aussi le plug-in jQuerify .
FWIW, Firebug intègre la commande spéciale include
, et jquery est alias par défaut: https://getfirebug.com/wiki/index.php/Include
Dans votre cas, il vous suffit de taper:
include("jquery");
Florent
Une des façons les plus courtes serait simplement de copier le code ci-dessous sur la console.
var jquery = document.createElement('script'); jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"; document.head.appendChild(jquery);
Cette réponse basée sur la réponse @genesis, j'ai d'abord essayé la version de signet @jondavidjohn, et ça ne fonctionne pas, alors je la modifie (ajoutez-la à votre signet):
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')}());
Les mots de prudence, ne sont pas testés dans Chrome, mais fonctionnent dans Firefox et ne sont pas testés dans un environnement conflictuel.
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 je dois faire avec les autres méthodes aussi), mais cela fonctionne.
Ceci 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)})
Si vous cherchez à le faire pour un utilisateur, j'ai écrit ceci: http://userscripts.org/scripts/show/123588
Il vous permettra d'inclure jQuery, plus UI et tous les plugins que vous souhaitez. Je l'utilise sur un site qui possède 1.5.1 et aucune interface utilisateur; Ce script me donne 1.7.1 à la place, plus UI, et aucun conflit dans Chrome ou FF. Je n'ai pas testé l'opéra moi-même, mais d'autres m'ont dit qu'il y avait également travaillé pour eux, donc cela devrait être très bien une solution complète d'utilisateurscript cross-browser, si c'est ce que vous devez faire pour cela.
Voici le code alternatif:
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);})();
Qui peut être collé directement dans la console ou créer une nouvelle page de favoris (dans Chrome, cliquez avec le bouton droit de la souris sur la barre de signets , Ajouter la page … ) et collez ce code comme URL.
Pour vérifier si cela a fonctionné, voir ci-dessous.
Avant:
$() Uncaught TypeError: $ is not a function(…)
Après:
$() []
Si vous souhaitez utiliser jQuery fréquemment de la console, vous pouvez facilement écrire un utilisateur. D'abord, installez Tampermonkey si vous êtes sur Chrome et Greasemonkey si vous êtes sur Firefox. Écrivez un simple utilisateur avec une fonction d'utilisation comme ceci:
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; } }
One-Liner intuitif
document.write(unescape('%3Cscript src="https://code.jquery.com/jquery-3.1.1.min.js"%3E%3C/script%3E'))
Vous pouvez modifier l'adresse src
.
J'ai parlé de ReferenceError: impossible de trouver la variable: jQuery