“以编程方式打开”；“查看来源”；浏览器中的HTML窗口是否使用Javascript？_Javascript_View Source

“以编程方式打开”；“查看来源”；浏览器中的HTML窗口是否使用Javascript？

javascript

“以编程方式打开”；“查看来源”；浏览器中的HTML窗口是否使用Javascript？,javascript,view-source,Javascript,View Source,如何以编程方式打开“查看源代码”窗口（使用一些Javascript），就像在浏览器中右键单击并单击“查看源代码”一样？这可能吗？根据您的使用情况，一种解决方案是将其作为Firefox插件或类似插件来执行。您可以执行以下操作，但它不会是原始HTML源：通过DOM循环，并通过输出找到的节点的属性/值来重新创建源这不是一项容易的任务（事实上是一项艰巨的任务），但它是你唯一的选择谢谢我认为这就是FF所做的，因为在源代码中总是有细微的差别。您可以使用Firefox、Chrome和旧版本IE支持的“查

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

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

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

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

谢谢

我认为这就是FF所做的，因为在源代码中总是有细微的差别。

您可以使用Firefox、Chrome和旧版本IE支持的“查看源代码”URI模式

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

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

更多信息：

您可以使用这个脚本，我们只需抓取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();
}

函数showSource（）{；
var source=“”；
source+=document.getElementsByTagName（'html'）[0].innerHTML；
源+=“”；
//现在我们需要转义html特殊字符，javascript已经转义了
//但这并不是我们想要的
source=source.replace（//g，“”）；
//现在我们添加标记以保留空白
javascript:void(window.open('view-source:'+location.href))

source=“”+source+”；
//现在打开窗口并将源设置为内容
sourceWindow=window.open（“”，'sourceofpage'，'height=800，width=800，scrollbars=1，resizeable=1'）；
sourceWindow.document.write（source）；
sourceWindow.document.close（）；//关闭文档以进行写入，而不是关闭窗口
//给源窗口焦点
if（window.focus）sourceWindow.focus（）；
}

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

与view source:解决方案相比，此解决方案的优势在于它也可以在windows XP SP2上的internet explorer 6>中工作，这就是它的主要优点。如果您的受众中没有人属于此组，请使用“查看源代码”选项，它的方式更简单。

这将适用于支持

查看源代码：

模式的浏览器

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

可通过以下方式直接检查：

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

--------------------------------------------------------------------- 注意：制作上述bookmarklet是一种自相矛盾和冗余的做法，因为通常情况下，支持

查看源代码：

模式（协议）的浏览器直接在用户界面中实现它-但是一些界面严重受损，这就是为什么在使用以下内容时特别需要使用此书签的原因：

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

设备VM的Splashtop“即时开启”（not）环境严重切断FF

（提示：书签）

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

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

view-source:jar:, view-source:chrome:, view-source:place:, ... ?
不是HTML源，因此没有
.innerHTML
属性
至于
任意架构的URI：
想必，这基本上是这样的-只要浏览器能够呈现具有特定模式的URI的页面，那么该页面必须具有可解释的源，该源可以显示，也可以查看，而不需要解释性呈现
（即，
view source:place:…
不会生成任何可行的页面，但
place:…
URI也不会生成，尽管这样的URI可以添加书签-至少使用FF[v.>3.04？]））
所以

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

最简单的方法是使用这一行Javascript:

//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(); }());
我希望它与您的浏览器兼容！
有两个选项[和一个解决方法，我将在后面解释..]
#1.D.O.M.中的“HTML” 这是“安全”结果，没有
包装和
doctype
：
#2.来自服务器的HTML（通过“自Ajax”）我已经在当前页面的控制台中运行了这两个选项（当然在我写这个答案之前…）这是并排的结果，注意区别

注意事项和材料：

您可以使用html的
outerHTML
（但它并不总是在每个标准DOM中都可用）

通过使用或在客户端动态编译/呈现页面源代码，减轻服务器负载

您可以在
localStorage
中进行任何（大多数）修改之前存储页面文本，将上面的代码分叉，并制作一个小脚本（非常好），在开始修改页面源代码之前，将该脚本放在页面的
标题中
不是投票否决你的人，但你可以随时获取innerHTML。我指的是一个像@Pim Jager说的解决方案，问题是如何用JavaScript实现它，所以我想我会投票否决FF插件solution@orip：我将假设它并从中学习：）10年来我从未听说过“查看源：”URI模式！我也没有，这让这个问题变得很好：）实际上，“使用一些Javascript”在Firefox插件中也是正确的。非常好的解决方法。对于符号，还需要一个替换，所以转义实体在源代码中呈现。IIRC（这是一个模糊的回忆），一些浏览器可能不会提供与innerHTML完全相同的源代码（丢失原始空白、更改某些元素/属性的大小写等），但对于大多数目的来说，它已经足够接近了。为什么不简单地使用outerHTML ？这是一个不需要动脑筋的解决方案，但却是最好的解决方案。简单。我知道这必须很容易。Ty我已经试过了，但Chrome56不起作用。这已经不起作用了，而且被认为是一种安全风险：这已经不起作用了。如果您现在尝试转到查看源：链接，则会出现访问被拒绝错误。此n view-source:jar:, view-source:chrome:, view-source:place:, ... ? <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> //function showSource() { window.location = "view-source:" + window.location; //} //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); }()); //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(); }());