就地替换整个 HTML 文档答案

【问题标题】：Replace entire HTML document in-place就地替换整个 HTML 文档
【发布时间】：2010-05-13 09:16:56
【问题描述】：

我试图避免使用数据 URI，因为我不希望生成的文档存储在浏览器的历史记录中。是否可以就地替换整个 HTML 文档？

我尝试了jQuery("html").html("<html>....</html>")，但style 的信息无法保存。

【问题讨论】：

我对您的说法“样式信息不存在”感到困惑，样式将链接到或包含在文档中，因此如果您替换整个文档，您会期望样式得到丢失？你真的需要替换 /whole/ 文件吗？从访问者的角度来看，您想达到什么目的？
抱歉，我的意思是 new 样式信息 .html("......") 没有无法生存。
我没有意识到你在谈论新样式信息。那条评论让我想知道；我已经更新了我的答案。
可能这个answer 有帮助。
这个答案可能有帮助stackoverflow.com/a/1236378/1770571

【解决方案1】：

您可能想要这样做：

jQuery("body").html("new content");

...其中"new content" 理想情况下只包含通常出现在body 元素中的标记，而不包括其余部分。这将替换 body 元素的内容，同时保留 head 中的任何内容（如样式表信息）。如果您还想更新标题，可以通过document.title = "new title"; 进行更新

编辑我想知道替换 html 元素内的 everything 是否可行，以及会发生什么。所以我这样做了：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
    font-weight: bold;
    color:       blue;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
    $(document).ready(pageInit);
    function pageInit() {
        $('#btnChange').live('click', changePage);
        $('#btnHiThere').live('click', sayHi);
    }

    function changePage() {
        $('html').html(
            "<head><\/head>" +
            "<body>" +
            "<input type='button' id='btnHiThere' value='Click for Alert'>" +
            "<p>Note how this text now looks.<\/p>" +
            "<\/body>"
        );
    }

    function sayHi() {
        alert("Hi there");
    }
})();
</script>
</head>
<body>
<input type='button' id='btnHiThere' value='Click for Alert'>
<input type='button' id='btnChange' value='Change Page'>
<p>Note now this text current appears in a sans-serif, bold, blue font.</p>
</body>
</html>

结果非常有趣——我最终得到了一个没有 head 或 body 的 DOM 结构，只有 html 和 @987654331 的后代@ 和 body 在里面。这可能是搞乱新内容中（新）样式的原因。我直接得到了基本相同的结果设置innerHTML（这可能是它在jQuery中不起作用的原因；jQuery在可以的时候使用innerHTML，尽管它在不能时不这样做非常复杂）；而如果我通过document.createElement 和document.appendChild 显式创建head 和body 元素来做类似的事情，它会起作用。

几乎可以肯定，所有这些都意味着付出的努力多于其价值。

但是：请注意，更改 head 和 body 元素的 content 似乎可以正常工作：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
    font-weight: bold;
    color:       blue;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
    $(document).ready(pageInit);
    function pageInit() {
        $('#btnChange').live('click', changePage);
        $('#btnHiThere').live('click', sayHi);
    }

    function changePage() {
        $('head').html(
            "<style type='text/css'>\n" +
            "body { color: green; }\n" +
            "<\/style>\n"
        );
        $('body').html(
            "<input type='button' id='btnHiThere' value='Click for Alert'>" +
            "<p>Note how this text now looks.<\/p>"
        );
    }

    function sayHi() {
        alert("Hi there");
    }
})();
</script>
</head>
<body>
<input type='button' id='btnHiThere' value='Click for Alert'>
<input type='button' id='btnChange' value='Change Page'>
<p>Note now this text current appears in a sans-serif, bold, blue font.</p>
</body>
</html>

因此，如果您将要加载的“页面”分为头部和身体部分，您可以轻松地对其进行更新。

【讨论】：

所以无法加载新的标签？
@james：这可能是可能的，但如果你这样做了，你需要确保它包含你想要的所有东西（比如样式表参考）。您可能不必担心维护脚本标签；一旦脚本被加载和评估，它就不再绑定到创建它的元素，删除元素对脚本没有影响。
我会注意到（很晚了，是的），头部中存在沉重的 JS（例如通过 Optimizely 或 Ensighten），甚至可以使仅更换身体变得站不住脚。

【解决方案2】：

没有jquery：

var newString = [
      "<!doctype html>"
    , "<html>"
    , "<head>"
    , "</head>"
    , "<body>"
    , "<h1>new content</h1>"
    , "</body>"
    , "</html>"
].join("");

document.getElementById('myIframeId').contentDocument.documentElement.outerHTML = newString;

【讨论】：