View Source on iPhone (bookmarklets)

I recently got an iPhone. But this isn’t the typical post of how great and wonderful an iPhone is, why you should get one, and so on and so forth. This post is much more practical than that.

In the course of using my new iPhone I had the need to view the source of a web page. Doesn’t matter what page it was or why I wanted to view the source. I just needed to.

So there I am, mobile safari running, my web page displayed…and now what? I couldn’t believe there wasn’t any way to view the source. I looked through every mobile safari option to no avail – there is no way to view the source.

To the interwebs! And as you’d imagine, this problem has been solved. The following site explains what you need to do:

View Source for Safari on iPhone

If you normally sync your browser bookmarks to your iPhone then that’s it! You’re done!

But I don’t, for a variety of reasons which we don’t need to go into here. So am I stuck? Of course not! Here’s the steps you need to follow:

  1. Open mobile safari
  2. Navigate to a site, any site
  3. Tap ‘Add Bookmark’
  4. Enter ‘View Source’ for the bookmark name
  5. Tap ‘Done’
  6. Bring up the bookmarks
  7. Tap the ‘Edit’ button
  8. Tap the ‘View Source’ bookmark you just added
  9. Delete the existing URL
  10. Paste in the following javascript:

javascript:var%20sourceWindow%20%3D%20window.open%28%27about%3Ablank%27%29%3B%20%0Avar%20newDoc%20%3D%20sourceWindow.document%3B%20%0AnewDoc.open%28%29%3B%20%0AnewDoc.write%28%27%3Chtml%3E%3Chead%3E%3Ctitle%3ESource%20of%20%27%20%2B%20document.location.href%20%2B%20%27%3C/title%3E%3C/head%3E%3Cbody%3E%3C/body%3E%3C/html%3E%27%29%3B%20%0AnewDoc.close%28%29%3B%20%0Avar%20pre%20%3D%20newDoc.body.appendChild%28newDoc.createElement%28%22pre%22%29%29%3B%20%0Apre.appendChild%28newDoc.createTextNode%28document.documentElement.innerHTML%29%29%3B

Now when you want to view the source of a web page on mobile safari, just bring up your bookmarks and tap the ‘View Source’ bookmark. It’ll open a new page containing the source of the current page. Simple!

On a final note we should appreciate what we just did. We didn’t associate a bookmark with an URL like we usually do, but instead associated the bookmark with a javascript snippet. Such a bookmark is called a bookmarklet.

Now that we’ve learned we can associate javascript snippets with a bookmark and execute that snippet on the contents of the currently-viewed page,  it makes you wonder what all can be done? A la Greasemonkey?

Advertisements

About taylodl

I'm an enterprise architect/developer who enjoys programming, math, music, physics, martial arts and beer
This entry was posted in iPhone and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s