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

时间：2009-11-29 08:37:40

标签： javascript view-source

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

7 个答案:

答案 0 :(得分：25)

您可以使用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>

更多信息：

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

答案 1 :(得分：13)

您可以使用此脚本，我们只需抓取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：解决方案的优势在于它也适用于Internet-explorer 6＆gt;在Windows XP SP2上，这就是它。如果您的受众群体都不在此群组中，请使用view-source选项，方式更简单。

答案 2 :(得分：3)

这将支持支持view-source:架构

的broswers 
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)

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

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

恶魔让我这样做 - 无法抗拒阐述：

  

...此链接（sic 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:,  ... ?

据推测，这只是因为 - 只要浏览器可以使用特定模式呈现带有的页面，那么该页面必须具有可以显示的可解释源，可以查看，w / o解释渲染。

（即。view-source:place:...不会产生任何可行的页面，但是place:... URI也没有，虽然这样的URI可以加入书签 - 至少用FF [v。> 3.04？]）< / p>

所以...... 

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

答案 3 :(得分：2)

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

答案 4 :(得分：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： from 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();
}());

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

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

Side By Side

笔记和东西......：

  • 你可能会使用html的outerHTML（但并不总是在每个标准DOM中都可用）
  • 使用mustache或handlebars在客户端动态编译/呈现网页源，从而减轻服务器的负担。
  • 您可以在localStorage中的任何（大多数）修改之前存储页面文本，分叉上面的代码，然后制作一个小的（和精彩的）脚本，将此脚本放在页面的{在您开始修改页面源之前{1}}。

答案 5 :(得分：1)

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

//function showSource() {

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

//}

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

答案 6 :(得分：-1)

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

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

由于

PS。我认为这就是FF正在做的事情，因为源中总会有细微差别。

相关问题
最新问题