For a couple of hours now I have been pulling my hair out about certain div's on a webpage being invisible on iPhone. I had guesses and theories by playing with css doing *{position:relative !important;display:block !important} but I absolutely had to see for fact what is going on in HTML. Randomly and incidentally, I came across this blog post which helped me tremendously.
In my case however, I did not want to view someone else's source. I wanted to examine mine. So I added this link to my HTML page and loaded it up on iPhone:
<a href="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">View Source</a>
"View Source" does exactly what is expected, opens up the source in the browser window.
Actual un-escaped JS:
var sourceWindow = window.open('about:blank'); var newDoc = sourceWindow.document; newDoc.open(); newDoc.write('<html><head>' + '<title>Source of ' + document.location.href + '</title>' + '</head><body></body></html>'); newDoc.close(); var pre = newDoc.body.appendChild(newDoc.createElement("pre")); pre.appendChild(newDoc.createTextNode( document.documentElement.innerHTML));
Thanks a lot Abe Fettig!