如何用 JavaScript 覆盖整个文档答案

【问题标题】：How do I overwrite an entire document with JavaScript如何用 JavaScript 覆盖整个文档
【发布时间】：2017-05-02 13:32:24
【问题描述】：

这不是一个重复的问题，原因如下：

我在询问如何在没有 jQuery 或任何其他花哨的 JavaScript 扩展的情况下用 JavaScript 替换整个 HTML 文档。与此问题类似的其他一些问题涉及 AJAX 或 jQuery 等特定问题。
我不是在问为什么document.write() 只附加到页面上。也许我正在寻找的纯 JavaScript 解决方案可能会包含该功能，但它不能仅仅如此，因为它本身是不够的。

我想要做的是覆盖网页，因为它仅在浏览器中显示为 HTML。函数document.write() 仅将传递给它的任何参数附加到文档的正文中。可以读取属性 document.documentElement.outerHTML，但与在页面的子元素上使用它时不同，它不能被写入，即使可以，它也会保持 DOCTYPE 不变。

我正在处理一个书签，所以这个 JavaScript 不会在页面中运行，这意味着脚本在运行时被覆盖没有问题。它也可以在浏览器的开发者工具中运行。

例如，假设我在浏览器中打开了about:blank。 DOM 的内容如下所示：

<html>
    <head></head>
    <body></body>
</html>

我希望能够用我想要的任何字符串覆盖它。所以，例如，我可以让它看起来像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Example</title>
    </head>
    <body>
        <p>This is an example.</p>
    </body>
 </html>

如何实现对文档的这种覆盖？

【问题讨论】：

据我所知，唯一的方法是修改每个部分。我建议也许考虑重构你的代码。

标签： javascript html

【解决方案1】：

试试这个：

function one() {
  document.write('<html><body><pre>the first html</pre></body></html>');
  document.close();    // this makes the difference
}
function two() {
  document.write('<html><body><pre>the second html</pre></body></html>');
  document.close();
}

参考linstantnoodles' answer问题document.write() overwriting the document?，document.open在document.write被调用之前被隐式调用，但document.close没有，并且
document.write()文档关闭时=重写文档；
document.write() 当文档打开时 = 追加到文档中。

【讨论】：

【解决方案2】：

document.write('Some Text')

document.write 重写页面的代码。

【讨论】：

【解决方案3】：

您可以使用document.implementation.createDocumentType 重写doctype 和document.getElementsByTagName 来获取DOM 元素，然后使用innerHTML 和setAttribute 重写。

var newDoctype = document.implementation.createDocumentType('html','-//W3C//DTD XHTML 1.0 Transitional//EN','http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdd');
    document.doctype.parentNode.replaceChild(newDoctype,document.doctype);
    document.getElementsByTagName('html')[0].setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');


var doc = document.getElementsByTagName('html')[0];
    doc.getElementsByTagName('head')[0].innerHTML = '<title>Example</title>';
    doc.getElementsByTagName('body')[0].innerHTML = '<p>This is an example.</p>';

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

编辑：

更新为通过 Xweque 和 xmlns 属性包含 cmets。

【讨论】：

不。这不能用于重写整个文档。一方面，它使 DOCTYPE 保持不变。
为什么需要重写doctype？
stackoverflow.com/questions/3147750/…
DOCTYPE 是只读属性。可以更改 as you can see here 但它实际上不会更新文档的 DOCTYPE。 DOCTYPE 是read-only property
它可以“更改”，因为当您检查文档的文档类型时，它将是您所做的，但它不会改变浏览器呈现的内容。这可能很谨慎，但在 Chrome 56 和 Firefox 50 中运行测试证实了这一点。