Kick some booty with invisible Flash!
JavaScript Games #2 - Solitaire
Writing a midi hifi system in JavaScript
You are here: irt.org | Articles | JavaScript | Miscellaneous | JavaScript Bookmarklets [ previous next ]
Published on: Sunday 4th July 1999 By: Martin Webb
Bookmarklets are simple tools that extend the surf and search capabilities of Netscape and Explorer web browsers.
Steve Kangas - "Chief of Rocket Science" - Bookmarklets.com
Here is something novel: using JavaScript to make your web experience more enjoyable, when you decide, and with what you want to do - rather than site specific JavaScript code that performs what the web author wants to do.
Wherever you browse the WWW, the chances are you'll come across a site that does something you don't like: opens new windows, displays white text on a black ground, etc. Until you've visited the site, you'll not know what it is that you'll not like. And once you've visited, its too late to change anything.
Wouldn't it be nice to actually alter the look of a site, extract data from a page, search the web and navigate in new ways?
This is where JavaScript Bookmarklets come in. The Bookmarklets.com web site run by Steve Kangas, uses a JavaScript feature not often demonstrated. Since the introduction of Netscape Navigator 3.x and Microsoft Internet Explorer 4.x, it has been possible to use a JavaScript URL in the form javascript:code in the location bar on all platforms: Windows, Mac, Unix etc.
If you are using one of the appropriate browsers, why not type the following into the location bar right now:
javascript:alert('Hello World')If you are using one of the appropriate browsers, and have JavaScript enabled, then you should see a JavaScript alert window with the words "Hello World". Notice how the location of the current document is not changed. This allows us to invoke JavaScript code on the current document without changing the documents location, and without requiring special access privileges to the documents site.
For example, to find out the current documents title, we can use the following JavaScript URL:
javascript:alert(document.title)
Which should display "JavaScript Bookmarklets".
If you regularly visit a particular web site, that, say, has a bad choice of background color. Perhaps you find it hard to read the text. Wouldn't it be great to be able to change the background color with out too much hassle? Well the following JavaScript URL would change the background color of the current document to white:
javascript:void(document.bgColor='#FFFFFF')
However, after typing that out a few times, you might find yourself putting up with orange text on a red background. This is where the bookmarklet idea comes into its own.
Indeed, why not? There is no reason not to. The JavaScript code, being part of the URL, will be safely stored in your bookmarks file. The JavaScript code cannot cause any problems (at worse it will simply generate an error message), it is small and effective, and it is only invoked when you choose the bookmark from your bookmark or favourites list.
But how do you bookmark a JavaScript URL? If you bookmark the effects of a typing in a JavaScript URL, then all you'll do is bookmark the current document.
This is simple. Just create a temporary page with the JavaScript URLs as complete hypertext links. For example:
<A HREF="javascript:void(document.bgColor='#FFFFFF')">White background</A> <A HREF="javascript:void(document.bgColor='#000000')">Black background</A>
which looks like:
White background
Black background
and then just bookmark the above links:
For Netscape on the Mac and some Unix platforms, it may be necessary to rename the bookmarklet (since Add Bookmark lists the javascript URL as the name of the bookmark instead of the link text).
You'll now have two bookmarklets which can be used to alter the background color of any web page.
Unlike normal bookmarks, which include the documents title text, the bookmarked links use the link URL as the description of the bookmark, however, once bookmarked it is possible to manage/edit your bookmarks to give them a more user friendly description.
The void operator discards the value of its operand and returns an undefined value. It is often used within links using the javascript: protocol to ignore the results of expressions. For example, when using the window objects open method, a reference is returned to the newly created window. This is usually used as a window handle. However, when used in a link, the returned window reference will cause the browser to display the returned result (normally '[object Window]') in the current window, thus overwriting the original contents. Using the void operator stops this from occuring:
<A HREF="javascript:void(window.open('about:blank', 'windowName', 'width=100,height=100'))">about:blank</A>Which produces:
Bookmarklets act on the windows document, this means that if the window contains a frameset then there is a possibility that a bookmarklet will fail to achieve its objective, e.g. changing the background color, as it will attempt to change the background color of the window and not one of the framed documents. It just depends on what the bookmarklet is attempting to do. For example, a bookmarklet to place the URL of the window in the body of an email message would work perfectly:
<A HREF="javascript:location.href='mailto:?SUBJECT=' + document.title + '&BODY=' + escape(location.href)">Send Location</A>
Which produces:
It is possible to make bookmarklets compatible with frames - although you'll probably want one version for non framed pages, and another for framed pages - you just need to add frame navigation to your bookmarklets. For example, to change the background color of any frame within a frameset, you could add a prompt to confirm which frame you wish to change:
<A HREF="javascript:n=top.frames.length;if(n>0) {f=prompt('Which frame? [1-'+n+']','');if (f>n) {alert('Out of range!')} else {void(top.frames[f-1].document.bgColor='#FFFFFF')}} else {void(document.bgColor='#FFFFFF')}">White background</A>
<A HREF="javascript:n=top.frames.length;if(n>0) {f=prompt('Which frame? [1-'+n+']','');if (f>n) {alert('Out of range!')} else {void(top.frames[f-1].document.bgColor='#000000')}} else {void(document.bgColor='#000000')}">Black background</A>Which produces:
White background [Frame compatible]
Black background [Frame compatible]
It's also possible to write a recursive script that descends through the frames. For an example, see the code for Page Freshness (Frames version) at http://www.bookmarklets.com/tools/frames.phtml#pgfrshfrm
As you are no doubt aware, Microsoft and Netscape have different implementations of JavaScript and the Document Object Model, therefore it is possible to write bookmarklets that will work with one browser but not another.
It is also possible write bookmarlets that will only work correctly on the latest browser versions. For example, to get feel for how long a document is the following bookmarklet will calculate how many windows the current document fills:
<A HREF="javascript:alert('The document fills about ' + Math.round((document.height*document.width) / (innerHeight*innerWidth)) + ' windows (at current window size)')">Document size</A>Which produces:
As it stands it will only work in Netscape Navigator 4+, but another bookmarlet could be written for Microsoft Internet Explorer 4+:
<A HREF="javascript:alert('The document fills about ' + Math.round((document.body.clientHeight*document.body.clientWidth) / (document.body.offsetHeight*document.body.offsetWidth)) + ' windows (at current window size)')">Document size</A>Which produces:
You just bookmark the appropriate bookmarklet for your browser, although if you are adventurous, you could always create bookmarklets that handle both browers at once:
<A HREF="javascript:if (document.all) {alert('The document fills about ' + Math.round((document.body.clientHeight*document.body.clientWidth) / (document.body.offsetHeight*document.body.offsetWidth)) + ' windows (at current window size)')} else {alert('The document fills about ' + Math.round((document.height*document.width) / (innerHeight*innerWidth))+' windows (at current window size)')}">Document size</A>Which produces:
Document size (MSIE4+ and NN4)
As Steve himself says "the limit on the number of characters [in a bookmark] is difficult to answer", although "Netscape on Macintosh will not accept bookmarks longer than 507 characters, and may have trouble with bookmarks longer than 255 characters." Currently Steve uses a maximum of 256 characters for all the bookmarklets at Bookmarklets.com. Although he hopes to be able to extend this self imposed limit based on feedback received to 1000, 2000 and then perhaps 4000 characters.
This article has only been a short introduction into the use of bookmarklets. Bookmarklets can be used to scroll through a document, hide and display images, alter the text font and color (MSIE4+ only), manipulate selected regions of text in the document, examine and manipulate the links in a page, manipulate windows - they are limited only by your own imagination.
My personal favourite is the following simple bookmarklet that resizes the window to 640x480 pixels (so that I can check what a page looks like at a smaller resolution):
<A HREF="javascript:resizeTo(640,480)">Resize (640x480)</A>
Which produces:
Simple, but extremely effective.
I would strongly suggest visiting the Bookmarklets.com web site run by Steve Kanga, as there are over 150 bookmarklets just waiting to be bookmarked.
Kick some booty with invisible Flash!
JavaScript Games #2 - Solitaire
Writing a midi hifi system in JavaScript
JavaScript Beginners Start Here