Question

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

Answer 1

以下内容至少可以在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);
}

Answer 2

将请求发送到同一页面并确保服务器响应Content-Type设置为“text / plain”而不是“text / html”。如果它是服务器端脚本，则可以使用查询参数来确定何时将Content-Type设置为“text / html”或“text / plain”。如果它是静态网页，您可以使用不同的内容类型制作不同的URI。

如何编写一个可以提供自己代码的演示页面？

2 个答案: