CODEWITHSUNDEEP
javascripthtml
SuperVeetz
SuperVeetz

Reputation: 2136

Displaying Source Code of HTML

I'm creating a Feature Index for a website and I thought that it would be nice if the user could just click on a link to view the source code instead of using the browser developer tools. After some research I found that we can easily view the source code of the current page like this:

<a onClick='window.location="view-source:" + window.location.href'>View Source</a>

Sadly, i'm kind of a big javascript noob still and was wondering if there is a way to hyperlink to the source code of other HTML pages on the site.

Thanks

Upvotes: 1

Views: 2106

Answers (4)

mplungjan
mplungjan

Reputation: 178393

Please note that the view-source protocol is blocked in several browsers

If you need to show the source of the page and other pages on the same site, you might do something like this assuming the html is well formed - I am using jQuery to get the data by the way (note link 2-4 will not work in this demo) :

    $(function() {
      $(".codeLink").on("click", function(e) {
        e.preventDefault(); // cancel the link
        if (this.id == "thispage") {
          $("#codeOutput").html(("<html>" + $("html").html() + "</html>").replace(/</g, "&lt;"));
        } else {
          $.get($(this).prop("href"), function(data) {
            $("#codeOutput").html(data.replace(/</g, "&lt;"));
          });
        }
      });
    });
    code {
      display: block;
      white-space: pre;
      font-family: Consolas, Courier, monospace;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li><a href="#" class="codeLink" id="thispage">Source of this page</a></li>
  <li><a href="page2.html" class="codeLink">Source of page 2</a></li>
  <li><a href="page3.html" class="codeLink">Source of page 3</a></li>
  <li><a href="page4.html" class="codeLink">Source of page 4</a></li>
  <hr/>
  <code id="codeOutput"></code>
</ul>

Upvotes: 4

giorgio
giorgio

Reputation: 10212

Yeah, exactly the same as you did now: direct the user to the url with view-source: prepended to the url. Example given, view-source:http://www.stackoverflow.com will direct your visitor to the source of stackoverflow. But beware that this depends solely on the browser you are using, meaning: some users will see the source, other users might not.

And a bonus jquery to convert all source code links (with class 'source') (not tested)

<a href="page1.html" class="source">Page 1 (source)</a>
<a href="page2.html" class="source">Page 2 (source)</a>
<a href=http://www.external.com" class="source">External (source)</a>

jQuery(document).ready(function ($) {
    $('a.source').each(function() {
        $(this).attr('href', 'view-source:' + $(this).attr('href'));
    });
});

Upvotes: 1

machinateur
machinateur

Reputation: 500

As explained on this site, you need to append the full url to the view-source: part.

window.location = 'view-source:' + window.location;

However, it might be better to either create a plain text copy (as a .txt file) or use php to set the documents header of Content-Type to text/plain, to ensure that all users are able to use the feature, no matter what browser they're using.

Upvotes: 0

praveen_programmer
praveen_programmer

Reputation: 1062

You can use this.

<script>
function viewthesource(){
window.location="view-source:"+window.location
}
</script>

<a href="javascript:viewthesource()">View Source</a>

Upvotes: 1

Related Questions