1

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

SuperVeetz
  • 2,128
  • 3
  • 24
  • 37

4 Answers4

4

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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
1

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'));
    });
});
giorgio
  • 10,111
  • 2
  • 28
  • 41
  • Thank you, i will try this now. The users viewing this site will only be using chrome but yes thank you for pointing that out – SuperVeetz Mar 04 '15 at 12:23
  • Hmm strange, view-source:http://www.stackoverflow.com works ... but view-source:http://cisweb.ufv.ca/~300105626/assignment02/ does not work .. maybe somethin to do with my school server? – SuperVeetz Mar 04 '15 at 12:31
  • view-source: http://etc... i need to learn how to tag code in these chats still ' body { display: block } test ' – SuperVeetz Mar 04 '15 at 12:34
  • what do you see? As I just see the source, when trying this: `view-source:http://cisweb.ufv.ca/~300105626/assignment02/` – giorgio Mar 04 '15 at 12:34
  • 1
    fixed it !! got rid of the + window.location.href and it works now THANKS – SuperVeetz Mar 04 '15 at 12:39
  • aha! there it is ;) it should be something like: `View source` Why would you append. Get rid of the [link] part and the last `window.locaton.href` – giorgio Mar 04 '15 at 12:42
  • @mplungjan yeah, read my answer, I warned him already. But it seems to be no problem for his use case – giorgio Mar 04 '15 at 12:47
1

You can use this.

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

<a href="javascript:viewthesource()">View Source</a>
praveen_programmer
  • 1,072
  • 11
  • 25
  • It not work in IE, Opera and Safari due to security issue.You can create function same on this link to do this functionality. http://stackoverflow.com/questions/1815021/programmatically-open-view-source-html-window-in-browser-with-javascript – praveen_programmer Mar 04 '15 at 12:30
  • Also poor practice to have `href="javascript:...` – mplungjan Mar 04 '15 at 12:46
0

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.

machinateur
  • 502
  • 5
  • 10