Question

我正在为一个网站创建一个功能索引，我认为如果用户只需点击链接查看源代码而不是使用浏览器开发人员工具就会很好。经过一些研究，我发现我们可以像这样轻松查看当前页面的源代码：

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

可悲的是，我仍然是一个很棒的javascript noob，并且想知道是否有一种方法可以超链接到网站上其他HTML页面的源代码。

由于

Answer 1

请注意，在多个浏览器中阻止了视图源协议

如果你需要在同一个网站上显示页面和其他页面的来源，你可能会做这样的事情，假设html格式正确 - 我正在使用jQuery来获取数据（注意链接2-） 4将不适用于此演示）：

＆＃13;

    $(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;"));
          });
        }
      });
    });

＆＃13;

    code {
      display: block;
      white-space: pre;
      font-family: Consolas, Courier, monospace;
    }

＆＃13;

<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>

＆＃13;

Answer 2

是的，与您现在完全一样：将用户引导到网址前面加view-source:的网址。给出的示例，view-source:http://www.stackoverflow.com将引导您的访问者到stackoverflow的源。但请注意，这完全取决于您使用的浏览器，这意味着：某些用户会看到源，其他用户可能不会。

转换所有源代码链接（使用类'source'）的奖励jquery（未测试）

<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'));
    });
});

Answer 3

你可以使用它。

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

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

Answer 4

正如this site所述，您需要将完整的网址附加到view-source:部分。

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

但是，创建纯文本副本（作为.txt文件）或使用php将Content-Type的文档标题设置为text / plain可能更好，以确保所有用户都能够使用功能，无论他们使用什么浏览器。

显示HTML的源代码

4 个答案: