如何编写将提供自身代码的演示页面？

假设您已经制作了产品的演示（网页），您想要制作一个页面来显示演示，并且在页面底部有一个按钮，您可以通过点击按钮来显示源代码上面的演示。如何很好地完成这项工作？如何编写将提供自身代码的演示页面？

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

如何编写将提供自身代码的演示页面？

回答

相关问题