javascript tutorial - [Solved-5 Solutions] Include jQuery in the javascript console - javascript - java script - javascript array
Problem:
Is there an easy way to include jQuery in the Chrome JavaScript console for sites that do not use it ? For example, on a website we would like to get the number of rows in a table. We know this is really easy with jQuery.
$('element').length;
click below button to copy the code. By JavaScript tutorial team
The site does not use jQuery. Can we add it in from the command line?
Solution 1:
Run this in our browser's JavaScript console, then jQuery should be available...
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();
click below button to copy the code. By JavaScript tutorial team
NOTE: if the site has scripts that conflict with jQuery (other libs, etc.) we could still run into problems. Update:
Making the best better, creating a Bookmark makes it really convenient, let's do it, and a little feedback is great too:
- Right click the Bookmarks Bar, and click Add Page
- Name it as we like, e.g. Inject jQuery, and use the following line for URL:
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')
click below button to copy the code. By JavaScript tutorial team
Below is the formatted code:
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')
click below button to copy the code. By JavaScript tutorial team
Here the official jQuery CDN URL is used, feel free to use our own CDN/version
Solution 2:
Run this in our 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);
click below button to copy the code. By JavaScript tutorial team
It creates new script tag, fills it with jQuery and appends to head
Solution 3:
Use the jQueryify booklet:
Instead of copy pasting the code in the other answers, this'll make it a clickable bookmark.
Solution 4:
- FWIW, Firebug embeds the
includespecial command, and jquery is aliased by default: - So in our case, we just have to type :
include("jquery");
click below button to copy the code. By JavaScript tutorial team
Solution 5:
One of the shortest ways would be just copy pasting the code below to the 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);