Programmatically Open "View Source" HTML Window In Browser With Javascript?
Solution 1:
You can use the "view-source" URI schema, supported by Firefox, Chrome, and older versions of IE.
No JavaScript required, just a normal link to the page you want the user to see in source view:
<a target="_blank" href="view-source:http://www.wikipedia.org/">view Wikipedia's home page HTML source</a>
More info:
Solution 2:
You could use this script, we simply grab the innerHTML of the html tag, reappend that, and paste that in a popup.
function showSource(){;
var source = "<html>";
source += document.getElementsByTagName('html')[0].innerHTML;
source += "</html>";
//now we need to escape the html special chars, javascript has escape
//but this does not do what we want
source = source.replace(/</g, "<").replace(/>/g, ">");
//now we add <pre> tags to preserve whitespace
source = "<pre>"+source+"</pre>";
//now open the window and set the source as the content
sourceWindow = window.open('','Source of page','height=800,width=800,scrollbars=1,resizable=1');
sourceWindow.document.write(source);
sourceWindow.document.close(); //close the document for writing, not the window
//give source window focus
if(window.focus) sourceWindow.focus();
}
This will not completely show the source as it will not show anything outside the HTML tags, or any properties inside the html tag, but it should be close enough, and works cross-browser.
The advantage of this solution over the view-source: solution is that it will also work in internet-explorer 6> on windows XP SP2, that's pretty much it. If none of your audience is in this group, go with the view-source option, its way simpler.
Solution 3:
This will do it for broswers supporting the view-source: schema
javascript:void(window.open('view-source:'+location.href))
A bookmarklet to do this can be made from the link in this scURIple:
data:text/html;charset=utf-8,<html>
<a href="javascript:void(window.open('view-source:'+location.href))">view-source</a>
</html>
Such a bookmarklet can be used on any page with a URI of an arbitrary schema and not just http: or pages that are HTML based (and hence devoid of properties like .innerHTML).
Thus the URI for (these scURIples are amenable to immediate mode rendering):
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnElEQVQ4jWNgwAMaGBiYHqdqT36SpvP/carOgdueKuz41OM2JE177ZM0nf+PUrUXkmwAAwMDw91QJf7HKTqnn6Tp/H+UplNNUMOrqaw5r6ew1D2fxCAKE3uYpKv0OEX3KdQlETg1P+5j4Hw9he3q66ls/19NZX35agpLzcsJDOIMDAwMj5O1zR6n6P54nKb942GqpgtWAxoaGJheTWVQeTeNqe31VJbPUINev5rB0ny/gUHgSbaqz5Mk/T+Pk3UbCXrlQT+D5NupTE3vpjG9fTOV9f+racxvXvZzND0tk/JrYGBgwtCwqtCSc3WFQ/GqEqfAZYWO2vMTFDgYGBgYrjaI8jybyFn0bhrTo3fTmf6/mc4gjdXGVcW2WmsrHP/D8OpypzcrS10OrC53bN1QaRVypFkj6FaPSCROJ88sd+FfV2YdtKHCrmV9he3ODeW29zZU2P1fX2H/f2254//VZU7/VxY72WFozM3J+Z+bk/Mfq6HFviJzy31tFld4payscJ44s8BdEkM9sgCMjQtjtZCqBhADcBpAKqaKAQB1iiloT36niAAAAABJRU5ErkJggg==
can be examined directly with:
view-source:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnElEQVQ4jWNgwAMaGBiYHqdqT36SpvP/carOgdueKuz41OM2JE177ZM0nf+PUrUXkmwAAwMDw91QJf7HKTqnn6Tp/H+UplNNUMOrqaw5r6ew1D2fxCAKE3uYpKv0OEX3KdQlETg1P+5j4Hw9he3q66ls/19NZX35agpLzcsJDOIMDAwMj5O1zR6n6P54nKb942GqpgtWAxoaGJheTWVQeTeNqe31VJbPUINev5rB0ny/gUHgSbaqz5Mk/T+Pk3UbCXrlQT+D5NupTE3vpjG9fTOV9f+racxvXvZzND0tk/JrYGBgwtCwqtCSc3WFQ/GqEqfAZYWO2vMTFDgYGBgYrjaI8jybyFn0bhrTo3fTmf6/mc4gjdXGVcW2WmsrHP/D8OpypzcrS10OrC53bN1QaRVypFkj6FaPSCROJ88sd+FfV2YdtKHCrmV9he3ODeW29zZU2P1fX2H/f2254//VZU7/VxY72WFozM3J+Z+bk/Mfq6HFviJzy31tFld4payscJ44s8BdEkM9sgCMjQtjtZCqBhADcBpAKqaKAQB1iiloT36niAAAAABJRU5ErkJggg==
---------------------------------------------------------------------
Note: Making the above bookmarklet is an oxymoron and redundant since generally, browsers that support the view-source: schema (protocol) implement it directly in the user interface - however some interfaces are severely crippled which is why this bookmark is especially necessary when using:
window.navigator.userAgent=
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4
(Splashtop-v1.2.17.0)
The Splashtop "Instant On" (not) environment by Device VM seriously amputates FF.
(hint: bookmark
<a href="javascript:void(window.open('view-source:file:///'))">
use view-source to traverse and peruse Splashtop system files</a>
to browse the Splashtop directory structure, generally ie: view-source:file://media/)
---------------------------------------------------------------------
the devil made me do it - can't resist expounding upon:
... this link (sic
view-source:) can be used on any page with a URI of an arbitrary schema ...
including itself, observe the URI:
view-source:view-source:view-source:view-source:view-source:about:blank
produces an obvious HTML source and so has an .innerHTML property
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title></title></head><body></body></html>
but
view-source:view-source:view-source:view-source:view-source:about:logo
is not an HTML source and so does not have an .innerHTML property.
As for
a URI of an arbitrary schema:
view-source:jar:, view-source:chrome:, view-source:place:, ... ?
Presumably, this is elementarily so - as long as the browser can render a page with a URI with a particular schema then that page must have an interpretable source that can be shown, ergo viewable, w/o an interpreted rendering.
(ie. view-source:place:... does not produce any viable page but then neither does a place:... URI though such a URI can be bookmarked - at least with FF [ v.>3.04? ] )
so ...
<a href='view-source:javascript:with(document){write(42);close();}' >v-s:js: answer</a>
<a href= 'javascript:with(document){write(42);close();}' >js: question</a>
Solution 4:
One solution, depending on your usage, is to do it as a Firefox add-on or similar.
Solution 5:
The Simplest Thing To Do Is Use This 1 Line Of Javascript:
//function showSource() {
window.location = "view-source:" + window.location;
//}
I Hope Its Compatible With Your Browser!
Post a Comment for "Programmatically Open "View Source" HTML Window In Browser With Javascript?"