当我在浏览器中右键单击并单击“查看源代码”时，如何以编程方式打开“查看源代码”窗口（使用一些 Javascript）？这可能吗？
问问题
31510 次
7 回答
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>
更多信息：
于 2009-11-29T08:49:55.860 回答
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, "<").replace(/>/g, ">");
//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> 中运行，仅此而已。如果您的观众都不在此组中，请使用查看源选项，它的方式更简单。
于 2009-11-29T10:50:12.400 回答
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)
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 呈现页面，那么该页面必须具有可以显示的可解释源，因此可以查看，没有解释的呈现。
（即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>
于 2014-04-14T14:37:17.610 回答
2
There are 2 options [ and a workaround, which I will Explain later.. ]
#1. "HTML" From D.O.M
//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);
}());
this is the 'safe' result, without the <html> wrapping and doctype:
#2. HTML From Server (Through "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();
}());
I've ran both in the console, in this current page (naturally before I've wrote this answer..)
and this is the side by side result, notice the difference.
notes and stuff..:
- you might use the html's
outerHTML(but its not always available in every standard DOM) - ease up your server's load by compiling/rendering the page's source dynamically in client-side using mustache or handlebars.
- you can store the text of the page, before any (most) of the modifications in the
localStorage, fork the code above, and make a small (and wonderful) script, place this script in the page'sheadjust before you start modifying the page's source..
于 2015-03-18T19:47:44.147 回答
2
根据您的使用情况，一种解决方案是将其作为 Firefox 附加组件或类似组件进行。
于 2009-11-29T08:43:03.293 回答
1
最简单的事情是使用这 1 行 Javascript：
//function showSource() {
window.location = "view-source:" + window.location;
//}
我希望它与您的浏览器兼容！
于 2014-12-11T19:20:44.130 回答
-1
您可以执行以下操作，但它不会是原始 HTML 源代码： 循环遍历 DOM 并通过输出您找到的节点的属性/值来重新创建源代码。
这不是一项容易的任务（实际上是一项艰巨的任务），但它是您唯一的选择。
谢谢
PS。我认为这就是 FF 正在做的事情，因为来源总是存在细微差别。
于 2009-11-29T08:49:40.843 回答