ブラウザを右クリックして[ソースの表示]をクリックしたときのように、プログラムで[ソースの表示]ウィンドウを（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タグの内側のプロパティは表示されないため、ソースは完全には表示されませんが、十分に近く、クロスブラウザで機能する必要があります。
このソリューションのview-source：ソリューションに対する利点は、WindowsXPSP2のInternetExplorer6>でも機能することです。これでほぼ完了です。このグループにオーディエンスがいない場合は、ソースの表示オプションを選択してください。これは非常に簡単です。
于 2009-11-29T10:50:12.400 に答える
3
view-source:これは、スキーマをサポートするブラウザに対してこれを行います
javascript:void(window.open('view-source:'+location.href))
これを行うためのブックマークレットは、次のスクリプトのリンクから作成できます。
data:text/html;charset=utf-8,<html>
<a href="javascript:void(window.open('view-source:'+location.href))">view-source</a>
</html>
http:このようなブックマークレットは、ベースのページだけでなく、任意のスキーマのURIを持つ任意のページで使用できますHTML（したがって、のようなプロパティはありません.innerHTML）。
したがって、（これらのscURIpleは即時モードレンダリングに適しています）の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)
デバイスVMによるSplashtopの「インスタントオン」（ではない）環境は、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:, ... ?
おそらく、これは基本的にそうです-ブラウザが特定のスキーマを使用して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
使用法に応じた1つの解決策は、Firefoxアドオンなどとして実行することです。
于 2009-11-29T08:43:03.293 に答える
2
2つのオプション [と回避策があります。これについては後で説明します。]
＃1。DOMからの「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：
は含まれていません。
＃2。サーバーからのHTML（「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();
}());
私はこの現在のページのコンソールで両方を実行しました（当然、この回答を書く前に..）
これは並べて表示された結果です。違いに注意してください。
メモなど..：
于 2015-03-18T19:47:44.147 に答える
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 に答える