使用Javascript编程在浏览器中打开“查看源代码”HTML窗口？

Question

使用Javascript编程在浏览器中打开“查看源代码”HTML窗口？

javascriptview-source

16

我该如何使用JavaScript以编程方式打开“查看源代码”窗口（就像在浏览器中右键单击并单击“查看源代码”一样）？这是可能的吗？

- Lance

7个回答

16

你可以使用这段脚本，我们只需获取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 标签内的属性，但应该足够接近，并且可跨浏览器使用。

与 view-source 的解决方案相比，这种解决方案的优势是它也适用于 Windows XP SP2 上的 Internet Explorer 6 >，就这样。如果您的受众群体都不在此范围内，请选择 view-source 选项，它更简单。

- Pim Jager

优秀的解决方法。还需要进行一次替换，对于和号，需要转义实体以在源中呈现。如果我没记错的话（这是一个模糊的回忆），一些浏览器可能不会使用innerHTML提供完全相同的源代码（丢失原始空格，改变某些元素/属性的大小写等），但对于大多数目的来说，它已经足够接近了。 - richardtallent

1

为什么不直接使用 outerHTML？ - Bergi

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 之类的属性）。

因此，这些scURIples的URI适合立即模式渲染：

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)

Splashtop的“即时启动”（不是）环境由Device VM严重削弱了FF。

（提示：书签）

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

浏览Splashtop目录结构，通常使用的是ie: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的页面，则该页面必须具有可解释的源代码，因此可以在未经解释呈现的情况下显示和查看。即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>

- ekim

3

无法使用。如果您尝试访问“view-source:”链接，将会收到拒绝访问的错误提示。 - Tot Zam

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：来自DOM

#2. 服务器传输的HTML（通过“自我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中，就在您开始修改页面源代码之前..

- user257319

2

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

- stpe

1

实际上，对于Firefox插件的情况，“使用一些Javascript”也是正确的。 - stpe

1

最简单的方法是使用这1行Javascript代码：

//function showSource() {

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

//}

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

- Mr Awesomeness

6

不再可行。如果您尝试访问 view-source: 链接，现在会收到拒绝访问的错误提示。 - Tot Zam

-1

你可以这样做，但它不会是原始的HTML源代码：遍历DOM并通过输出找到的节点的属性/值来重新创建源代码。

这不是一项容易的任务（实际上是一个巨大的任务），但这几乎是你唯一的选择。

谢谢

PS. 我认为这就是FF正在做的事情，因为源代码总是有微妙的差异。

- Mike Gleason jr Couturier

不是那个给你点踩的人，但你总是可以获取 innerHTML。 - Daniel Sloof

我所提到的解决方案就像@Pim Jager所说的那样，而问题是关于在JavaScript中实现它，所以我想我会对FF插件的解决方案进行反对票。 - Mike Gleason jr Couturier

@orip：我会接受并从中学习 :) 在过去的10年里，我从未听说过“view-source:” URI模式！ - Mike Gleason jr Couturier

我也没有，这使得这个问题非常好 :) - orip

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- richardtallent · Accepted Answer

您可以使用“view-source” URI模式，该模式受Firefox、Chrome和旧版本IE的支持。

不需要JavaScript，只需提供一个普通链接到您想让用户在源代码视图中查看的页面：

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

更多信息：

http://en.wikipedia.org/wiki/View-source