Question

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

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

Answer 1

你可能想这样做：

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

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

执行此操作

编辑我想知道在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>

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

所有这些几乎可以肯定意味着这需要付出更多的努力。

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

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

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

Answer 2

没有jquery：

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

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

就地替换整个HTML文档

2 个答案: