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

(function(){
	var i = document.links.length;
	while(i--)
	{
		if(/^javascript:/.test(document.links[i].href))
		{
			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.

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.

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.

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:

• 17 powerful bookmarklets for your iPhone
• Bookmarklets, Favelets and Snippets

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.

Post filed under: javascript.

Skip to comment form.

1. Aaron says:

   June 25, 2009 at 10:14 am

   Great job!
2. The Css Ninja says:

   June 25, 2009 at 11:11 am

   Thanks Aaron glad you like it.
3. Amber says:

   September 16, 2009 at 3:48 am

   This by far, is the most useful code snippet I have added to my iPhone!

   I appreciate the highlighting of bookmarks on the page once the favelet has been activated. That saves me from all the frustration/guess work.

   If I could ask for any improvement, may I suggest support for other favelets without the (#deleteme_JavaScript) characteristics? There are some pages out there which post direct snippet links without the fluff that needs to be deleted first.

   I’ve noticed these favelets are ignored by your favelet.

   Otherwise this is some genius favelet – I love it.
   You rock!
4. The Css Ninja says:

   September 16, 2009 at 10:17 am

   Thanks for kind words Amber.

   I’m not sure what you mean this only works with direct links that start with the javascript: protocol. Do you have a link where this isn’t working so I can get a better understanding of what you’re trying to do.
5. JD says:

   December 23, 2009 at 2:25 am

   Hi Ninja-
   Maybe you can help me. I’m looking for a way to add a link in a site to bookmark the URL through javascript on an iphone rather than hitting the “+” in the browser. Is it possible? I don’t see major sites (espn, cnn) offering this, but my customer is looking to put a “click here to bookmark your site” and have that place something on your desktop without having to press the “+” icon in the brower. Can you help?

   Thanks!
6. The Css Ninja says:

   December 23, 2009 at 8:34 am

   No the only way to add as a bookmark or to your home screen is through the “+” symbol.
7. David says:

   December 27, 2009 at 1:17 pm

   Hah. Great minds think alike. Looks like we’ve done the same thing:

   http://davidsanson.com/home/gizmos.html#iphonlets-bookmarklet
8. ali says:

   April 27, 2011 at 6:20 pm

   amazing this will make my life a lot easier for debugging ipad sites – thanks
9. Cesar says:

   November 18, 2011 at 12:01 am

   Amazing! I had been looking for an ipad firebug clone for months, but now you have found the way to run the original.

   Big thanks guys!
10. Frank Schenk says:

    November 22, 2011 at 11:26 pm

    Excellent work, thanks a lot for sharing it!
11. RichardBronosky says:

    September 11, 2012 at 1:02 pm

    I really like this “consumer ended” approach. I’ve approached the problem from the publisher’s end.
    https://github.com/RichardBronosky/Perfect-Bookmarklets

    I will be adding your bookmarklet to both my toolkit and my repo. Thanks!