Reputation: 2136
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
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, "<"));
} else {
$.get($(this).prop("href"), function(data) {
$("#codeOutput").html(data.replace(/</g, "<"));
});
}
});
});
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
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
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
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