【问题标题】：Programmatically open "View Source" HTML Window in Browser with Javascript?使用 Javascript 在浏览器中以编程方式打开“查看源代码”HTML 窗口？
【发布时间】：2017-07-22 07:15:59
【问题描述】：

当我在浏览器中右键单击并单击“查看源代码”时，如何以编程方式打开“查看源代码”窗口（使用一些 Javascript）？这可能吗？

【问题讨论】：

标签： javascript view-source

【解决方案1】：

您可以使用 Firefox、Chrome 和旧版 IE 支持的“view-source”URI 架构。

不需要 JavaScript，只需一个普通的链接到您希望用户在源视图中看到的页面：

<a target="_blank" href="view-source:http://www.wikipedia.org/">view Wikipedia's home page HTML source</a>

【讨论】：

这很简单，但却是最好的解决方案。简单的。我知道这必须很容易。 ty
作为记录，我试过这个，它不适用于 Chrome 56。
这不再起作用并被视为安全风险：bugzilla.mozilla.org/show_bug.cgi?id=1172165

【解决方案2】：

您可以使用这个脚本，我们只需抓取 html 标记的 innerHTML，重新附加它，然后将其粘贴到弹出窗口中。

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

这不会完全显示源代码，因为它不会显示 HTML 标记之外的任何内容，或 html 标记内的任何属性，但它应该足够接近，并且可以跨浏览器工作。

这个解决方案相对于视图源的优势：解决方案是它也可以在 windows XP SP2 上的 internet-explorer 6 中运行，仅此而已。如果您的观众都不在这个组中，请使用查看源选项，它更简单。

【讨论】：

出色的解决方法。对于＆符号，还需要一个替换，因此转义的实体在源中呈现。 IIRC（这是一个模糊的回忆），某些浏览器可能不会为您提供与 innerHTML 完全相同的源（丢失原始空白，更改元素/属性的某些大写等），但对于大多数用途来说已经足够接近了。跨度>
为什么不直接使用outerHTML？

【解决方案3】：

这适用于支持view-source: 架构的浏览器

javascript:void(window.open('view-source:'+location.href))

可以通过此 scURIple 中的链接制作执行此操作的书签：

data:text/html;charset=utf-8,<html>
       <a href="javascript:void(window.open('view-source:'+location.href))">view-source</a>
</html>

这样的小书签可以用在任何具有任意模式 URI 的页面上，而不仅仅是 http: 或基于 HTML 的页面（因此没有像 .innerHTML 这样的属性）。

因此 URI（这些 scURIples 适合立即模式渲染）：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnElEQVQ4jWNgwAMaGBiYHqdqT36SpvP/carOgdueKuz41OM2JE177ZM0nf+PUrUXkmwAAwMDw91QJf7HKTqnn6Tp/H+UplNNUMOrqaw5r6ew1D2fxCAKE3uYpKv0OEX3KdQlETg1P+5j4Hw9he3q66ls/19NZX35agpLzcsJDOIMDAwMj5O1zR6n6P54nKb942GqpgtWAxoaGJheTWVQeTeNqe31VJbPUINev5rB0ny/gUHgSbaqz5Mk/T+Pk3UbCXrlQT+D5NupTE3vpjG9fTOV9f+racxvXvZzND0tk/JrYGBgwtCwqtCSc3WFQ/GqEqfAZYWO2vMTFDgYGBgYrjaI8jybyFn0bhrTo3fTmf6/mc4gjdXGVcW2WmsrHP/D8OpypzcrS10OrC53bN1QaRVypFkj6FaPSCROJ88sd+FfV2YdtKHCrmV9he3ODeW29zZU2P1fX2H/f2254//VZU7/VxY72WFozM3J+Z+bk/Mfq6HFviJzy31tFld4payscJ44s8BdEkM9sgCMjQtjtZCqBhADcBpAKqaKAQB1iiloT36niAAAAABJRU5ErkJggg==

可以直接检查：

view-source:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABnElEQVQ4jWNgwAMaGBiYHqdqT36SpvP/carOgdueKuz41OM2JE177ZM0nf+PUrUXkmwAAwMDw91QJf7HKTqnn6Tp/H+UplNNUMOrqaw5r6ew1D2fxCAKE3uYpKv0OEX3KdQlETg1P+5j4Hw9he3q66ls/19NZX35agpLzcsJDOIMDAwMj5O1zR6n6P54nKb942GqpgtWAxoaGJheTWVQeTeNqe31VJbPUINev5rB0ny/gUHgSbaqz5Mk/T+Pk3UbCXrlQT+D5NupTE3vpjG9fTOV9f+racxvXvZzND0tk/JrYGBgwtCwqtCSc3WFQ/GqEqfAZYWO2vMTFDgYGBgYrjaI8jybyFn0bhrTo3fTmf6/mc4gjdXGVcW2WmsrHP/D8OpypzcrS10OrC53bN1QaRVypFkj6FaPSCROJ88sd+FfV2YdtKHCrmV9he3ODeW29zZU2P1fX2H/f2254//VZU7/VxY72WFozM3J+Z+bk/Mfq6HFviJzy31tFld4payscJ44s8BdEkM9sgCMjQtjtZCqBhADcBpAKqaKAQB1iiloT36niAAAAABJRU5ErkJggg==

----------------------------------------------- ----------------------

注意：制作上述书签是矛盾和多余的，因为通常支持view-source: 模式（协议）的浏览器直接在用户界面中实现它 - 但是有些界面严重受损，这就是为什么这个书签在使用时特别需要：

window.navigator.userAgent=
         Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4
                                                                                    (Splashtop-v1.2.17.0)

Device VM 的 Splashtop “Instant On”（非）环境严重截断了 FF。

（提示：书签

   <a href="javascript:void(window.open('view-source:file:///'))">
         use view-source to traverse and peruse Splashtop system files</a>

浏览Splashtop目录结构，一般即：view-source:file://media/)

----------------------------------------------- ----------------------

是魔鬼让我这么做的——无法抗拒地阐述：

...此链接（原文如此view-source:）可用于任何具有任意架构 URI 的页面...

包括自身，观察URI：

view-source:view-source:view-source:view-source:view-source:about:blank

产生明显的 HTML 源代码，因此具有 .innerHTML 属性

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                                                                 <html><head><title></title></head><body></body></html>

但是

view-source:view-source:view-source:view-source:view-source:about:logo

不是 HTML 源代码，因此没有.innerHTML 属性。

至于

任意模式的 URI：

 view-source:jar:,   view-source:chrome:,   view-source:place:,  ... ?

大概，这是基本的 - 只要浏览器可以呈现具有特定架构的 URI 页面，那么该页面必须具有可以显示的可解释源，因此可见，w /o 解释渲染。

（即view-source:place:... 不会生成任何可行的页面，但place:... URI 也不会生成，尽管这样的 URI 可以添加书签 - 至少在 FF [v.>3.04?] 中）

所以……

<a href='view-source:javascript:with(document){write(42);close();}' >v-s:js: answer</a>  
<a href=                    'javascript:with(document){write(42);close();}' >js: question</a>

【讨论】：

这不再有效。现在，如果您尝试访问 view-source: 链接，则会收到拒绝访问错误。

【解决方案4】：

根据您的使用情况，一种解决方案是将其作为 Firefox 插件或类似插件来实现。

【讨论】：

实际上，“使用一些 Javascript”在 Firefox 插件案例中也是如此。

【解决方案5】：

有 2 个选项 _{[ 和一个解决方法，我稍后会解释.. ]}

#1。来自 D.O.M 的“HTML”

//get HTML from DOM (not really HTML from the server but an interrupted one - the plus is that it is immediate to fetch).
(function(){
  "use strict";

  var d = document.createElement("div");
  d.style.cssText = "max-width:500px; max-height:200px; background-color:rgba(223,223,223,.7); border:3px solid rgba(0,0,0,.5); padding:5px; margin:10px; overflow-x:hidden; overflow-y:auto; word-break:break-word; font-family:'Courier New',Consolas,Lucida Console,monospace,sans-serif; text-shadow:.3px .3px rgba(0,0,0,.2),-0.3px -0.3px rgba(0,0,0,.2); border-radius:5px; box-shadow:1px 1px 5px rgba(0,0,0,.3),-1px -1px 5px rgba(0,0,0,.3)";
  d.appendChild(document.createTextNode(document.querySelector('html').innerHTML));
  document.querySelector('body').appendChild(d);
}());

这是没有<html> 包装和doctype 的“安全”结果：

#2。来自服务器的 HTML（通过“Self-Ajax”）

//get HTML from server, its the real-deal, but requires internet-connection (again...), since its the same-page you are OK to Ajax (domain wise..)
(function(){
  var xhr = new XMLHttpRequest();
  xhr.responseType = "text";
  xhr.onreadystatechange = function(e){
    var 
      xhr = e.target
      , d = document.createElement("div")
      ;

    if(xhr.DONE !== xhr.readyState) return;

    d.style.cssText = "max-width:500px; max-height:200px; background-color:rgba(223,223,223,.7); border:3px solid rgba(0,0,0,.5); padding:5px; margin:10px; overflow-x:hidden; overflow-y:auto; word-break:break-word; font-family:'Courier New',Consolas,Lucida Console,monospace,sans-serif; text-shadow:.3px .3px rgba(0,0,0,.2),-0.3px -0.3px rgba(0,0,0,.2); border-radius:5px; box-shadow:1px 1px 5px rgba(0,0,0,.3),-1px -1px 5px rgba(0,0,0,.3)";

    d.appendChild(document.createTextNode(xhr.responseText));
    document.querySelector('body').appendChild(d);
  }
  xhr.open("GET", String(window.location.href), true);
  xhr.send();
}());

我已经在控制台中运行了这两个当前页面_{（自然是在我写这个答案之前..）}

这是并排的结果，请注意区别。

笔记和东西..：

您可以使用 html 的 outerHTML（但它并不总是在每个标准 DOM 中都可用）
通过使用mustache 或handlebars 在客户端动态编译/呈现页面源来减轻服务器的负载。
您可以在localStorage 中的任何（大部分）修改之前存储页面的文本，将上面的代码分叉，并制作一个小（而且很棒）脚本，将此脚本放在页面的head就在您开始修改页面的源代码之前..

【讨论】：

【解决方案6】：

最简单的事情就是使用这 1 行 Javascript：

//function showSource() {

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

//}

我希望它与您的浏览器兼容！

【讨论】：

这不再有效。现在，如果您尝试访问 view-source: 链接，则会收到拒绝访问错误。

【解决方案7】：

您可以执行以下操作，但它不会是原始 HTML 源代码：循环遍历 DOM 并通过输出您找到的节点的属性/值来重新创建源代码。

这不是一件容易的事（实际上是一项艰巨的任务），但它是您唯一的选择。

谢谢

附言。我认为这就是 FF 正在做的事情，因为来源总是存在细微差别的。

【讨论】：

不是反对你的人，但你总是可以抓住innerHTML。
我指的是像@Pim Jager 说的那样的解决方案，问题是关于用 JavaScript 做的，所以我想我会否决 FF 附加解决方案
@orip：我会假设它并从中学习:) 10 年来我从未听说过“view-source:”URI 模式！
我也没有，这让这个问题很好:)

----------------------------------------------- ----------------------

----------------------------------------------- ----------------------

#1。来自 D.O.M 的“HTML”

#2。来自服务器的 HTML（通过“Self-Ajax”）

我已经在控制台中运行了这两个当前页面（自然是在我写这个答案之前..）

我已经在控制台中运行了这两个当前页面_{（自然是在我写这个答案之前..）}