Getting the source code of a site on your phone

-

To get the source code of a site while on your phone (or your computer, if you feel like it), you need to add a bookmarklet.

On a computer you can simply drag this link to your bookmarks bar: View source

For Android devices and iPhones, copy the following code to your clipboard:

javascript:(function(){document.location.href='https://www.apptic.me/projects/source/?url='+document.location.href})();

Then save this page as a bookmark named "View Source" (or anything you want, for that matter). After saving, edit the bookmark and paste the code as the location.

Save a bookmark Edit the bookmark Paste the code

Now whenever you can click the bookmarklet, the source of your current page will open. If you click it on this page, for example, the source code of https://www.apptic.me/blog/get-source-code-on-your-phone.php is shown.

The bookmarklet works by opening a page on Apptic, where our server requests the source code of a site and presents it to you. Therefore you can't get the source of password protected pages using this bookmarklet.

How to build it yourself

There are two components to the source code fetcher: the bookmarklet itself (client side), and the PHP at https://www.apptic.me/projects/source/ (server side).

1) server side

Here is the full code of the index.php file:

<?
$error = false;
if (isset($_GET["url"])){
    $url = $_GET["url"];
    if (filter_var($url, FILTER_VALIDATE_URL) === FALSE) {$error = true;}
}
else{$error = true;}
if(!$error){
?>
<html>
<head>
view-source:<?echo str_replace("http://", "", $url);?>



</head>
<body onload="prettyPrint()">

<?
$handle = fopen($url, "r");

if ($handle) {
    while (!feof($handle)) {
        $buffer = fgets($handle, 4096);
        echo htmlentities($buffer);
    }
    fclose($handle);
}
?>
</body> </html> <? } else{echo 'Cannot access requested URL.';} ?>

Lines 1 - 7 essentially serve to determine whether there is a URL given as a parameter and, if there is one, if it is valid. If not, then $error is set to true.

If there is no error, then we add some formatting (see Displaying code on your website). We want syntax highlighting, in addition to making the code full screen. But displaying code isn't the focus of this post.

Lines 36 - 44 use our GET variable (the URL) to fetch the source code. Then the response is sent as output 4096 characters at a time. The same code is used in Creating a Reddit front page generator.

At the end, we handle $error == true by presenting an error message.

2) the bookmarklet

Note that you can run Javascript on any page by typing the following as the URL:

javascript:codeGoesHere();

We use this method, creating an anonymous function to avoid any possible conflicts:

javascript:(function(){
document.location.href='https://www.apptic.me/projects/source/?url='+document.location.href;
})()

document.location.href can be used as a getter and setter for the document URL. So we set the URL to https://www.apptic.me/projects/source/ with the parameter ?url=CURRENT_URL. The current URL is document.location.href.

Now we just need to put it in a link:

View source

Done! The link will redirect the user to our server side code.

Conclusion

The code used to create a bookmarklet can return any Javascript function - not just the one we make in the example. Moreover, the fopen and fgets functions in PHP have already demonstrated multiple purposes.

Hope you find this post useful!

Tags: mobile source code php fetch website bookmarklet

See also: Displaying code on your website

Back to all posts

Neel Somani

About the Author

Neel Somani, a student at the University of California, Berkeley, is the founder of Apptic LLC. In addition to computer science, he's interested in philosophy and entrepreneurship. You can follow him on LinkedIn and Twitter.

comments powered by Disqus