如何編寫將提供自身代碼的演示頁面？

假設您已經制作了產品的演示（網頁），您想要製作一個頁面來顯示演示，並且在頁面底部有一個按鈕，您可以通過點擊按鈕來顯示源代碼上面的演示。如何很好地完成這項工作？如何編寫將提供自身代碼的演示頁面？

2011-08-30 wong2

只需html/css/javascript或服務器端代碼？ – Zirak

@Zirak沒有服務器端代碼 – wong2

以下內容至少應在Firefox（通過XMLSerializer），Internet Explorer，Chrome和Safari（通過outerHTML）下工作。在不支持的瀏覽器中，它將回退到innerHTML，缺點是不包含根元素本身（<html>）。

function getMyCode() 
{ 
    if ("XMLSerializer" in window) 
    return new XMLSerializer().serializeToString(document.documentElement); 
    else if ("outerHTML" in document.documentElement) 
    return document.documentElement.outerHTML; 
    else 
    return document.documentElement.innerHTML; 
}

話又說回來，如果你想要「真正」的源代碼，而不是DOM的序列化版本，你不會得到周圍重新下載 - 瀏覽器不一定存儲。您可以使用XMLHttpRequest：

function getMyCode() 
{ 
    var req = new XMLHttpRequest(); 
    req.open("GET", window.location.href); 
    req.onreadystatechange = function() 
    { 
    if (this.readyState != 4) 
     return; 
    alert(this.responseText); 
    }; 
    req.send(null); 
}

來源

2011-08-30 09:21:29

我想要的源代碼（你看到使用右鍵點擊視圖頁面源），但IIRC innerHTML是DOM（你看到與Chrome開發人員工具） – wong2

@ wong2：更新了我的答案。 –

使請求相同的頁面，並確保服務器的Content-Type設置爲「text/plain的」來代替「text/html的」響應。如果它是服務器端腳本，那麼您可以使用查詢參數來確定何時將Content-Type設置爲「text/html」或「text/plain」。如果它是一個靜態網頁，您可以使用不同的內容類型製作不同的URI。

來源

2011-08-30 09:25:20

如何編寫將提供自身代碼的演示頁面？

回答

相關問題