iPhone bookmarklet, for saving bookmarklets

Have you ever found a useful bookmarklet while browsing on your iPhone only to discover that you can’t actually save it directly from the phone. Frustrating I know, so much so that I decided to make my own bookmarklet that lets you save it on your phone. Let’s delve right in and take a look at the JavaScript involved.


The JavaScript

	var i = document.links.length;
			var linkStyle = document.links[i].style;
			document.links[i].href = "#removeme_" + document.links[i].href;
			linkStyle.backgroundColor = "#1E528C";
			linkStyle.color = "#fff";
			linkStyle.fontWeight = "bold";


How it works

We initialise an anonymous function which self executes. It loops through the document links using a reverse while loop; this is the fastest way to iterate through a collection. It will then use the test function to match a regular expression (regexp), in our case the string “javascript:”. The ^ symbol tells the regexp to only return true if the string being tested begins with “javascript:” so it will only match bookmarklet links. Once it has made a match it will then prepend the string “#removeme_” to the beginning of the link so it will act as an anchor, this so we can save it on the iPhone. The other lines add background colour, font colour and font weight to give visual indication so we can easily determine which links are bookmarklets.

I get it just give me the bookmarklet

So now we have a little understanding of how the bookmarklet works lets have an example. If you click here, the bookmarklet will run and do the changes mentioned above to the clicked link.

How do I save it to my bookmarks?

So we’ve run the bookmarklet and the link(s) have been highlighted. If you click the highlighted link again it will append the bookmarklet to the end of the url in the address bar, see below.

You can see that the bookmarklet has been appended to the url in the address bar

Save the bookmarklet to your bookmarks

You’ll need to save the url to your bookmarks, you’ll notice in the second image that you can’t edit the url yet.

Save the bookmarklet to your bookmarksYou'll notice that bookmarklet url can't be edited

Edit the bookmarklet url

Go into your bookmarks and edit the bookmark you just saved and remove the url that appears before the word javascript. See below.

Remove everything before the word javascriptYour bookmark should look like this for the url textbox

Where can I find some good bookmarklets?

Now we have the bookmarklet saved in your bookmarks we can start to use it. Check out these great resources:

Suggestions and/or Improvements?

Let me know your thoughts on this bookmarklet and what I can do to make improvements. Post your ideas and contributions in the comments.