替换整个页面内容（包括DOCTYPE）

Question

替换整个页面内容（包括DOCTYPE）

4

我知道这个问题以前被问过，但大多数答案只是替换了body标签或需要jQuery。我想使用纯JavaScript替换整个页面内容，包括DOCTYPE。并且，我不想通过 window.location.href 重定向页面。考虑以下简单的页面（index.html）：

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
</head>

<body>
  <p>Testing...</p>
</body>

</html>

使用 AJAX 加载另一个页面后：

var page;
var file = new XMLHttpRequest();
file.open('GET', './toload.html');
file.onreadystatechange = function() {
  page = file.responseText;
}
file.send();

我希望清空当前页面内容，并显示toload.html的内容，其内容如下：

<!DOCTYPE html>
<html>

<head>
  <title>Loaded</title>
</head>

<body>
  <p>Hello. This page is now loaded!</p>
</body>

</html>

我该怎么做？

- Nobody

2

document.write(page); will do it. Is there any reason your not using an ajax framework? If you were to use JQuery you could do $('html').html(page); - Edward

1

可能是使用Javascript替换整个页面（包括头部）的重复问题。 - Andy Ray

@AndyRay 我已经阅读了那个页面，但我认为这些方法都不能替换 DOCTYPE。 - Nobody

@Edward document.write(page); 显然不具备完整的浏览器兼容性。 - Nobody

@Edward 另外，jQuery 方法只会更改 HTML 内容，而不是整个页面。 - Nobody

document.write是最早添加到DOM的功能之一。你在哪里发现了有限的兼容性问题？否则，你必须手动构建DOM，使用像这样的DOM方法：https://dev59.com/bmsy5IYBdhLWcg3w6yUN - Heretic Monkey

3个回答

1

不用担心。我决定直接替换<html>标签内的内容。我使用的代码是：

var contents = "Sorry : ( IMPORT FAILED...";
var file = new XMLHttpRequest();
file.open("GET", "/toload.html", false);
file.onreadystatechange = function() {
    contents = file.responseText;
}
file.send(null);
document.getElementsByTagName("html")[0].innerHTML = contents;

无论如何感谢您的精彩答案！

- Nobody

0

只需使用 document.write() ;

- user17216571

1

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

虽然这段代码可能解决了问题，但是包括解释它如何以及为什么解决了问题将有助于提高您的帖子质量，并可能导致更多的赞。请记住，您正在回答未来读者的问题，而不仅仅是现在提问的人。请[编辑]您的答案以添加解释并指出适用的限制和假设。 - Yunnosch

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Edward · Accepted Answer

The closest I can get is:

document.getElementsByTagName('html')[0].innerHTML="";

如果我找到为什么您无法清除DOM根节点的原因，我会更新这个答案。