ansaurus

Question

Programmatically open "View Source" HTML Window in Browser with Javascript?

Answer 1

+2 A:

One solution, depending on your usage, is to do it as a Firefox add-on or similar.

stefpet 2009-11-29 08:43:03

-1 Javascript Solution asked

Mike Gleason jr Couturier 2009-11-29 18:01:55

Actually, "using some Javascript" is true in the Firefox add-on case as well.

stefpet 2009-11-29 18:56:52

Answer 2

A:

You could do the following but it won't be the original HTML source: Loop through the DOM and re-create the source by outputting the properties/values of the nodes you find.

It is not an easy task (a huge one in fact), but it is pretty your only option.

Thanks

PS. I think this is what FF is doing, because there is always a subtle difference in the sources.

Mike Gleason jr Couturier 2009-11-29 08:49:40

Not the one who downvoted you, but you can always grab innerHTML.

Daniel 2009-11-29 08:59:10

-1 for "it is pretty your only option"

orip 2009-11-29 11:38:47

I was referring to a solution like @Pim Jager said, and the question was about doing it in JavaScript, so I guess I'll downvote the FF add-on solution

Mike Gleason jr Couturier 2009-11-29 18:01:12

@orip: I'll assume it and learn from it :) in 10 years I've never heard of "view-source:" URI schema!

Mike Gleason jr Couturier 2009-11-29 18:08:22

neither have I, which makes this question great :)

orip 2009-11-30 00:48:15

Answer 3

+15 A:

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/"&gt;view Wikipedia's home page HTML source</a>

More info:

http://en.wikipedia.org/wiki/View-source

richardtallent 2009-11-29 08:49:55

Answer 4

+4 A:

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, "&lt;").replace(/>/g, "&gt;");
    //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.

Pim Jager 2009-11-29 10:50:12

Excellent workaround. One more replacement is needed, for ampersands, so escaped entities are rendered in source. IIRC (and this is a vague recollection), some browsers may not give you exactly the same source with innerHTML (losing original white space, altering some capitalization of elements/attributes, etc.), but it's close enough for most purposes.

richardtallent 2009-11-30 00:39:43

ansaurus

tags:

views:

answers:

Programmatically open "View Source" HTML Window in Browser with Javascript?

related questions