The 'Get Current URL' Bookmarklet Pattern

In An Introduction to Bookmarklets, I introduced the idea of a bookmarklet, a browser based bookmark that lets you execute a small Javascript programme in the context of the currently displayed web page, rather than taking you to a bookmarked page.

In this post, I'll provide an example of a bookmarklet pattern that passes the URL of the current page to another web page.

To show you the effect of the bookmark, click here: see what happens

What you should find is that the URI of the current page is passed to the SplashURL service, which displays a short URL code, and a QR code, that both point back to this page.

If you click through on the link above and look at the URI of the page that is loaded, you will see that it has the form:

http://splashurl.net/?mode=qrcode&url=a_version_of_the_uri_of_this_page

What the link above did - and what a bookmarklet can do, is the following:

• look up the URI of the current page using the Javascript 'command' window.location.href;


• encode this URI so that it can be used in another URI: encodeURIComponent(window.location.href);


• use this encoded version of the URI of the current page in the SplashURL URI:
  var newURI="http://bigtiny.ecs.soton.ac.uk?mode=qrcode&url="+encodeURIComponent(window.location.href);


• reload the current window with this new URI: window.location=newURI;

That gives us the following Javascript code snippet:
var newURI="http://bigtiny.ecs.soton.ac.uk?mode=qrcode&url="+encodeURIComponent(window.location.href);window.location=newURI;

We can actually write this in a simplified form where we do not create the newURI variable at all. Instead, we simply change the location of the current window to the new URI:
window.location="http://bigtiny.ecs.soton.ac.uk?mode=qrcode&url="+encodeURIComponent(window.location.href);

To use this code in a bookmarklet, or in a web page link*, we need to identify this code snippet as Javascript:
javascript:var newURI="http://bigtiny.ecs.soton.ac.uk?mode=qrcode&url="+encodeURIComponent(window.location.href);window.location=newURI;

[* note that some web publishing platforms will strip javascript code out of a link - Blogger is kind enough to leave it in.]

We might also take a precautionary step of making sure that the program code in the bookmarklet does not conflict with any javscript code already present in the current page:
javascript:(function(){var newURI="http://bigtiny.ecs.soton.ac.uk?mode=qrcode&url="+encodeURIComponent(window.location.href);window.location=newURI;})()

Here's the bookmarklet: SplashQR

That is, we wrap our program snippet in the following:
javascript:(function(){Javascript bookmarklet program code here})()

(To 'install' it on your Firefox or Safari browser, simply drag the link to the bookmarks toolbar. In IE, right click on the link and add to Favourites/Links, then in the View->Toolbar menu option of your browser, make sure the Link Toolbar is ticked.)

So now we have a pattern for creating bookmarklets that can pass the URI of the current page to another page. So if you see web service that includes the URI of another page in its URI, you can write a bookmarklet to invoke that service on a web page you are currently viewing.

Here's a simple form to help you generate this sort of bookmarklet:

Bookmarklet name:
javascript:(function(){window.location=' '+encodeURIComponent(window.location.href);})()

Your bookmarklet:

If you come across any web page/services that include another URI in their URI, particularly in the context of academic, public, legal, governmental, medical or corporate libraries, please post an example, along with a description of what the page does, in the comments below.

In the next post in this series, I'll review how to create a bookmarklet that acts on a piece of text that is highlighted/selected by the user within the current page.