以编程方式打开“查看源代码”使用 Javascript 在浏览器中显示 HTML 窗口?
如何以编程方式打开“查看源代码”窗口(使用一些 JavaScript),就像在浏览器中右键单击并单击“查看源代码”一样?这可能吗?
How do I programmatically open the "View Source" window (using some Javascript) like when I right click in the browser and click "View Source"? Is this possible?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
更多
发布评论
评论(7)
您可以使用 Firefox、Chrome 和旧版 IE 支持的“查看源”URI 架构。
不需要 JavaScript,只需一个指向您希望用户在源代码视图中看到的页面的普通链接:
更多信息:
http://en.wikipedia.org/wiki/View-source
You can use the "view-source" URI schema, supported by Firefox, Chrome, and older versions of IE.
No JavaScript required, just a normal link to the page you want the user to see in source view:
More info:
http://en.wikipedia.org/wiki/View-source
您可以使用此脚本,我们只需获取 html 标记的innerHTML,重新附加它,然后将其粘贴到弹出窗口中。
这不会完全显示源代码,因为它不会显示 HTML 标记之外的任何内容,也不会显示 html 标记内的任何属性,但它应该足够接近,并且可以跨浏览器工作。
该解决方案相对于 view-source: 解决方案的优点是它也可以在 internet-explorer 6> 中工作。在 Windows XP SP2 上,差不多就是这样。如果您的受众都不属于该组,请使用查看源选项,这样更简单。
You could use this script, we simply grab the innerHTML of the html tag, reappend that, and paste that in a popup.
This will not completely show the source as it will not show anything outside the HTML tags, or any properties inside the html tag, but it should be close enough, and works cross-browser.
The advantage of this solution over the view-source: solution is that it will also work in internet-explorer 6> on windows XP SP2, that's pretty much it. If none of your audience is in this group, go with the view-source option, its way simpler.
这将为支持
view-source:
模式的浏览器执行此操作。可以从此 scURIple 中的链接制作一个书签来执行此操作:
这样的书签可以在具有任意 URI 的任何页面上使用schema 而不仅仅是
http:
或基于HTML
的页面(因此缺乏.innerHTML
等属性)。因此,URI(这些 scURIples 适合立即模式渲染):
可以直接检查:
-------------------------------------------------------- -------------------------
注意:制作上述小书签是一种矛盾且多余的做法,因为一般来说,支持
view-source:
模式(协议)直接在用户界面中实现它 - 然而有些界面严重受损,这就是为什么在使用以下书签时特别需要:Splashtop“即时启动”(非)环境由Device VM严重截肢FF。
(提示:
浏览Splashtop目录结构的书签,一般即:
view-source:file://media/
)------------------ -------------------------------------------------- -
魔鬼让我这么做 - 忍不住要解释:
包括它本身,观察 URI:
产生一个明显的 HTML 源,因此 < strong>有
.innerHTML
属性,但
不是 HTML 源,因此没有
.innerHTML
属性。至于
大概,这基本上是这样 - 只要浏览器可以使用具有特定模式的 URI 呈现页面,那么该页面必须具有可以显示的可解释源,因此可见,无需解释渲染。
(即,
view-source:place:...
不会生成任何可行的页面,但place:...
URI 也不会生成任何可行的页面,尽管这样的 URI 可以添加书签- 至少对于 FF [ v.>3.04 ] )所以......
This will do it for broswers supporting the
view-source:
schemaA bookmarklet to do this can be made from the link in this scURIple:
Such a bookmarklet can be used on any page with a URI of an arbitrary schema and not just
http:
or pages that areHTML
based (and hence devoid of properties like.innerHTML
).Thus the URI for (these scURIples are amenable to immediate mode rendering):
can be examined directly with:
---------------------------------------------------------------------
Note: Making the above bookmarklet is an oxymoron and redundant since generally, browsers that support the
view-source:
schema (protocol) implement it directly in the user interface - however some interfaces are severely crippled which is why this bookmark is especially necessary when using:The Splashtop "Instant On" (not) environment by Device VM seriously amputates FF.
(hint: bookmark
to browse the Splashtop directory structure, generally ie:
view-source:file://media/
)---------------------------------------------------------------------
the devil made me do it - can't resist expounding upon:
including itself, observe the URI:
produces an obvious HTML source and so has an
.innerHTML
propertybut
is not an HTML source and so does not have an
.innerHTML
property.As for
Presumably, this is elementarily so - as long as the browser can render a page with a URI with a particular schema then that page must have an interpretable source that can be shown, ergo viewable, w/o an interpreted rendering.
(ie.
view-source:place:...
does not produce any viable page but then neither does aplace:...
URI though such a URI can be bookmarked - at least with FF [ v.>3.04? ] )so ...
根据您的使用情况,一种解决方案是将其作为 Firefox 插件或类似组件。
One solution, depending on your usage, is to do it as a Firefox add-on or similar.
有2个选项 [和一个解决方法,我稍后会解释..]
#1。 “HTML” 来自 DOM,
这是“安全”结果,没有

包装和
doctype
:#2。来自服务器的 HTML(通过“Self-Ajax”)
我已经在控制台中运行了这两个页面,在当前页面 (当然在我写这个答案之前..)
这是并排的结果,注意差异。
注释和内容...:
outerHTML
(但它不是在每个标准 DOM 中始终可用)localStorage
中进行任何(大多数)修改之前存储页面的文本,分叉上面的代码,并制作一个小(且精彩)的脚本,将此脚本放置在页面的 < code>head 就在您开始修改页面源代码之前..There are 2 options [ and a workaround, which I will Explain later.. ]
#1. "HTML" From D.O.M
this is the 'safe' result, without the

<html>
wrapping anddoctype
:#2. HTML From Server (Through "Self-Ajax")
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..:
outerHTML
(but its not always available in every standard DOM)localStorage
, fork the code above, and make a small (and wonderful) script, place this script in the page'shead
just before you start modifying the page's source..最简单的事情就是使用这 1 行 Javascript:
我希望它与您的浏览器兼容!
The Simplest Thing To Do Is Use This 1 Line Of Javascript:
I Hope Its Compatible With Your Browser!
您可以执行以下操作,但它不会是原始 HTML 源:循环遍历 DOM 并通过输出您找到的节点的属性/值来重新创建源。
这不是一项容易的任务(实际上是一项艰巨的任务),但它是您唯一的选择。
谢谢
。我想这就是FF正在做的事情,因为来源之间总是存在着微妙的差异。
You could do the following but it won't be the original HTML source: Loop through the DOM and re-create the source by outputting the properties/values of the nodes you find.
It is not an easy task (a huge one in fact), but it is pretty your only option.
Thanks
PS. I think this is what FF is doing, because there is always a subtle difference in the sources.