堆棧內存溢出
  簡體   English   中英

使用Javascript在瀏覽器中以編程方式打開“查看源代碼” HTML窗口？

[英]Programmatically open “View Source” HTML Window in Browser with Javascript?

 原文  2009-11-29 08:37:40  0   7    javascript/ view-source

問題描述

我如何以編程方式打開“查看源代碼”窗口（使用某些Javascript），就像我在瀏覽器中右鍵單擊並單擊“查看源代碼”一樣？ 這可能嗎？

7 個解決方案

解決方案1
 25  2009-11-29 08:49:55

您可以使用Firefox，Chrome和舊版IE支持的“視圖源” 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/查看源

解決方案2
 13 已采納  2009-11-29 10:50:12

您可以使用此腳本，我們只需獲取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的優勢在於：該解決方案也可以在Windows XP SP2的Internet Explorer 6>中使用。 如果您的受眾都不在這個組中，請使用view-source選項，該方法更簡單。

解決方案3
 3  2014-04-14 14:37:17

這將對支持view-source: schema的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>

這樣的書簽可以在具有任意模式URI的任何頁面上使用，而不僅限於http:或基於HTML的頁面（因此沒有諸如.innerHTML之類的屬性）。

因此，的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: schema（protocol）的瀏覽器直接在用戶界面中實現它-但是，某些界面嚴重受損，這就是為什么在使用時特別需要此書簽的原因： 

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:,  ... ?

大概是這樣-只要瀏覽器可以使用具有特定架構的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>

解決方案4
 2  2009-11-29 08:43:03

根據您的使用情況，一種解決方案是將其作為Firefox附加組件或類似的附件來進行。

解決方案5
 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 ： 來自DOM

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

我在當前頁面的控制台中都運行了（很自然，在我寫這個答案之前。）

這是並行結果，請注意區別。

並排

筆記和東西..：

  • 您可以使用html的outerHTML （但並非在每個標准DOM中都總是可用）
  • 通過使用小胡子或把手在客戶端動態地編譯/渲染頁面源，從而減輕服務器的負載。
  • 您可以在對localStorage進行任何（大多數）修改之前存儲頁面的文本，派生上面的代碼，並制作一個小巧（和奇妙的）腳本，在開始修改頁面的文本之前，將該腳本放在頁面的head資源..

解決方案6
 1  2014-12-11 19:20:44

最簡單的方法是使用以下1行Java代碼： 

//function showSource() {

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

//}

我希望它與您的瀏覽器兼容！

解決方案7
 -1  2009-11-29 08:49:40

您可以執行以下操作，但它不是原始的HTML源：遍歷DOM並通過輸出找到的節點的屬性/值來重新創建源。

這不是一件容易的事（實際上是一項艱巨的任務），但這顯然是您唯一的選擇。

謝謝

PS。 我認為FF正在這樣做，因為在來源上總是存在細微的差異。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 JavaScript：使用瀏覽器打開窗口 javascript閱讀器，可在網絡瀏覽器中閱讀html文件-開源嗎？ 用JavaScript打開一個窗口，並從外部源加載HTML內容 使用 JavaScript“縮放”瀏覽器窗口/視圖？ 如何以編程方式打開瀏覽器的 JavaScript 控制台？ 在插入 HTML 的 JavaScript 中打開窗口 window.open是javascript還是html？ 查看PHP，Javascript和HTML的源代碼？ javascript window.open無法在同一瀏覽器窗口中打開 使用ExternalInterface打開瀏覽器窗口，然后在其中編寫HTML
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM