我试图避免使用数据 URI，因为我不希望生成的文档存储在浏览器的历史记录中。是否可以就地替换整个 HTML 文档？
我试过了 jQuery("html").html("<html>....</html>") ，但是 style信息无法生存。
最佳答案
你可能想这样做:
jQuery("body").html("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>
结果非常有趣——我最终得到了一个完全没有head 或body 的 DOM 结构，只是 html 里面有 head 和 body 的后代。这可能是新内容中(新)样式困惑的原因。我直接得到基本相同的结果设置 innerHTML (这可能就是为什么它在 jQuery 中不起作用；jQuery 在可能的情况下使用 innerHTML ，尽管不这样做是非常复杂的所以当它不能时)；而如果我通过 document.createElement 和 document.appendChild 显式创建 head 和 body 元素来做类似的事情, 它有效。
所有这些几乎肯定意味着付出的努力超出了它的值(value)。
但是:请注意，更改 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>
因此，如果您将要加载的“页面”分为头部和 body 部分，您可以轻松地就地更新它。
关于jquery - 就地替换整个 HTML 文档，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2825586/