How to tell if jQuery is out of date
As with most projects I work on, there's normally some JavaScript interaction. Often, however I've got all kinds of different versions of jQuery going on in these projects so when I try to access the latest functionality, and it groaks, I'll go sniffing around to check if it's the latest version.
Never again!
Download
I've created a Firefox plugin and Greasemonkey version of the app:
Greasemonkey script: Latest jQuery
Note that:
- If jQuery is not on the page - nothing happens.
- If jQuery is up to date - nothing happens.
- If jQuery is out of date - a message appears.
- If Firebug is installed, the message is sent to the console, otherwise it is sent to an alert box.
How it works
I've been making use of the version number in jQuery - which is nicely tucked away:
>>> $.fn.jquery
"1.2.3"
Using this, I figured I could automate a way of comparing the local jQuery version against the latest production version.
The logic is simple:
- Create an iframe sandbox and inject a script tag pointing to the latest jQuery.
- Compare current
$.fn.jqueryto the iframe version and notify if different. - Kill the iframe to restore the DOM back to original.
Although this shouldn't strictly be doable in Greasemonkey, I kind of found a way around the sandboxing rules it enforces on you.
I managed to get around the sandboxing rules by doing the following:
- Create the iframe.
- Drop it in to the DOM.
- Using
document.writeon the iframe, populate it with code to do the donkey work.
If you look at the source code you'll see the function to be run sits in a variable, which I convert to text and wrap in '(' + code.toString() +')()' - to make it auto-execute once the iframe has been dropped in.
Since the iframe is in the original page's DOM, it means I have full access to the window.parent - which holds all the public variables on the window object - which is how all the magic works.
You should follow me on Twitter here I'll tweet about JavaScript, HTML 5 and other such gems (amongst usual tweet-splurges)
Neat.
BTW, you might want to put the greasemonkey script on http://userscripts.org as well.
Cheers - I've now put it up on the userscripts site.
Personally the Greasemonkey version is slightly better than the plugin, because I can set Greasemonkey to only run on my offline development environments, rather than every site I visit.
cool extension! I tried to install the firefox plugin but it appears it doesn't work with FF3, will try the Greasemonkey version instead.
@Natalie - aye - I need to rebuild the extension for FF3, sucks that that doesn't work out of the box.
[...] How to tell if jQuery is out of dateA brief hack that let’s you instantly see, whether your jQuery is out of date in Firefox with Firebug. [...]