就地替换整个HTML文档

I'm trying to avoid using a data URI because I do not want the generated document to be stored in the browser's history. Is it possible to replace the entire HTML document in-place?

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

I tried jQuery("html").html("<html>....</html>"), but the style information does not survive.

我尝试了jQuery（“html”）。html（“ .... ”），但样式信息无法生存。

2 个解决方案

#1

You probably want to do this:

你可能想这样做：

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

...where "new content" would ideally only include the markup that would normally appear within the body element and not the rest. That will replace the body element's contents, whilst leaving anything you have in head (like style sheet information) alone. If you also want to update the title, you can do that via document.title = "new title";

...其中“新内容”理想情况下仅包括通常出现在body元素内而不是其余部分的标记。这将取代身体元素的内容，同时留下你头上的任何东西（如样式表信息）。如果您还想更新标题，可以通过document.title =“new title”进行更新;

Edit I got to wondering about replacing everything inside the html element, whether that would work, and what would happen. So I did this:

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

<!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>

And the results were quite interesting — I end up with a DOM structure that doesn't have a head or body at all, just html with the descendants of head and body inside. This is probably what's messing up the (new) styling in the new content. I get essentially the same result setting innerHTML directly (which may be why it doesn't work in jQuery; jQuery uses innerHTML when it can, although it's very sophisticated about not doing so when it can't); whereas if I do something similar by explicitly creating the head and body elements via document.createElement and document.appendChild, it works.

结果非常有趣 - 我最终得到的DOM结构根本没有头部或身体，只有html与头部和身体的后代。这可能是在新内容中弄乱（新）样式的原因。我直接得到了相同的结果设置innerHTML（这可能就是为什么它在jQuery中不起作用; jQuery在可能的情况下使用innerHTML，尽管它不能在不能这样做的时候这样做）;而如果我通过document.createElement和document.appendChild显式创建head和body元素来做类似的事情，那么它可以工作。

All of which almost certainly means this is more effort than it's worth.

所有这些几乎肯定意味着这比它的价值更多的努力。

But: Note that changing the content of the head and body elements seems to work just fine:

但是：请注意，更改头部和身体元素的内容似乎工作得很好：

<!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>

So if you separate the "page" you're loading into head and body parts, you can easily update it in place.

因此，如果您将“页面”分开加载到头部和身体部位，则可以轻松地将其更新到位。

#2

No jquery:

没有jquery：

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

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

#1