How to setup a bookmark on an iPad to view HTML source

Viewing HTML on an iPad - or on any device/browser

This page describes how to create a bookmark for the Safari browser that will enable the HTML source of the page being viewed to be examined in a new browser window. It also describes the use of the JavaScript DOM create methods:
HTML DOM createTextNode()
HTML DOM createElement() and
HTML DOM appendChild().

Not being able to edit and upload webpages and associated files on my iPad (lack of a compitent editor or ftp client), the iPad is useful to review what I have designed and uploaded from my computer.

The lack of a native functionality of the Opera browser on the iPad lead me to search for a method to do so. The AppleToolBox link below showed me how to do this by creating a JavaScript and adding it to the URL box of a newly created bookmark on the iPad.

The appletoolbox website is junked-up with adverts and popups making it pretty impossible to view what the code actually does.

How this works

The JavaScript (show_source_code.txt - I have a copy on this server) is basically a function that opens a new browser window and writes an HTML document to it containing the source code of the page that is contents of the currently viewed page.

There is a lot of "stuff" going on here and is food for thought. I will try and disseminate the code on this website.

As a continuation of my analysis of CSS and the DOM there are some topics such as appending a child element to the documents body and creating TextNodes. The TextNode is then added to the document.documentElement.innerHTML

Top

From a button on this page

A function was contructed on this page from the code given in appletoolbox example. Opens a new window and echoes the html to this new page.

I need to work ot what is going on with appendChild and createElement etc.

While copying the code into a Bookmark on an iPad or iPhone with the appropriate version of iOS it probably will not work on an Andriod phone or a Windows computer no matter what browser you are using. The possible exception maybe the Safari browser on a Windows computer, but that is not possible as Safari is not available for any other OS than an Apple.

More analysis

There are two objects in the code, "a" and "b"
Object "a" is a 'pre' element in a new windows' body element.
Object "b" adds style and then appends it to "a".

The code

Style is added: overflow="auto" and whitespace="pre-wrap"

var b=a.body.appendChild(a.createElement('pre'));

The function display_html_in_new_window() - written for use on any browser

<script>
function display_html_in_new_window(){
var a=window.open('about:blank').document;
a.write('<!DOCTYPE html><html><head><title>Source of '+location.href+'</title><meta name="viewport" content="width=device-width" /></head><body></html>'); 
a.close();
var b=a.body.appendChild(a.createElement('pre'));
b.style.overflow='auto'; 
b.style.whiteSpace='pre-wrap';
b.appendChild(a.createTextNode(document.documentElement.innerHTML));
}
</script>

To view this code please view this page on a desktop computer

The code above is of limited use for those developing on a Windows (and probably Linux) computer who will find that they have other methods to view their code. Adding the function (script) to a page also "messes" with the syntax highlighting in a HTML editor as the code in the script contains HTML tags which will be interpreted incorrectly.

The function display_html_in_new_window() may be useful if your intent is to document a coding technique and you want the code to be viewable on specific iOS devices.

The code was useful for me as it was an excercise in taking some code and adapting it to run from a webpage. The formating of the <pre> tag for documentation was also learnt. For example, the use of the style="overflow:auto" displays an automatic scrollbar on the page (the main page creation string is longer than the page width). That being said, if you want to use the code to view HTML on an iOS device copy the code from the link below and paste that into a bookmark on your iPad.

Viewing HTML on an iPad - or on any device/browser

Links