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.

Comments

1. 

   Great job!

   Aaron, June 25th, 2009
2. 

   Thanks Aaron glad you like it.

   The Css Ninja, June 25th, 2009
3. 

   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!

   Amber, September 16th, 2009
4. 

   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.

   The Css Ninja, September 16th, 2009
5. 

   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!

   JD, December 23rd, 2009
6. 

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

   The Css Ninja, December 23rd, 2009
7. 

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

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

   David, December 27th, 2009
8. 

   amazing this will make my life a lot easier for debugging ipad sites – thanks

   ali, April 27th, 2011
9. 

   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!

   Cesar, November 18th, 2011
10. 

    Excellent work, thanks a lot for sharing it!

    Frank Schenk, November 22nd, 2011

Trackbacks

1. Social comments and analytics for this post…

   This post was mentioned on Twitter by sojamo: looking at bookmarklets for the iphone right now. this instruction http://tr.im/qz7P worked out well – also check http://tr.im/qz8l...

   uberVU - social comments, December 14th, 2009

2. [...] astuce présentée ici vous permetter d’automatiser un peu la tâche. C’est en fait un bookmarklet qui liste [...]

   Bookmarklets sur Safari Mobile « Monsieur Bleu Company, March 25th, 2010

3. [...] install a bookmarklet that will let you install other bookmarklets into Safari without having to sync with iTunes. If you [...]

   Debugging iOS Mobile Safari (iPad, iPhone) « Cord's Life, November 4th, 2010