Question

出于以下原因，这不是一个重复的问题：

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

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

我正在开发一个bookmarklet，因此这个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>

如何实现这种文档覆盖？

Answer 1

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

＆＃13;

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>';

＆＃13;

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

＆＃13;

修改

更新以包含Xweque和xmlns属性的注释。

Answer 2

document.write('Some Text')

document.write重写页面的代码。

Answer 3

尝试一下：

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

请参阅问题document.write() overwriting the document?中的linstantnoodles' answer，在调用document.open之前隐式调用document.write，但是document.close不会，并且< br /> document.write()在关闭文档时=重写文档；
document.write()当文档打开时=附加到文档。

如何使用JavaScript覆盖整个文档

3 个答案: