jQuery 就地替换整个 HTML 文档
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2825586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replace entire HTML document in-place
提问by james
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 styleinformation does not survive.
我试过了jQuery("html").html("<html>....</html>")，但style信息不存在。
回答by T.J. Crowder
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 bodyelement 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";
..."new content"理想情况下，where只包含通常出现在body元素中的标记，而不包含其余部分。这将替换 body 元素的内容，同时保留您拥有的任何内容head（如样式表信息）。如果您还想更新标题，可以通过document.title = "new title";
EditI got to wondering about replacing everythinginside the htmlelement, 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 heador bodyat all, just htmlwith the descendants of headand bodyinside. This is probably what's messing up the (new) styling in the new content. I get essentially the same result setting innerHTMLdirectly (which may be why it doesn't work in jQuery; jQuery uses innerHTMLwhen 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 headand bodyelements via document.createElementand document.appendChild, it works.
而结果是相当有趣-我最终不具有一个DOM结构head或body在所有，只是html用的后裔head和body内部。这可能是弄乱了新内容中的（新）样式的原因。我innerHTML直接得到了基本相同的结果设置（这可能是它在 jQuery 中不起作用的原因；jQueryinnerHTML在可以的时候使用，尽管在它不能的时候不这样做是非常复杂的）；而如果我通过and显式创建headandbody元素来做类似的事情，它会起作用。document.createElementdocument.appendChild
All of which almost certainly means this is more effort than it's worth.
所有这些几乎可以肯定意味着这比它的价值更多的努力。
But: Note that changing the contentof the headand bodyelements seems to work just fine:
但是：请注意，更改内容的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>
So if you separate the "page" you're loading into head and body parts, you can easily update it in place.
因此，如果将要加载到头部和身体部位的“页面”分开，则可以轻松地将其更新到位。
回答by bob
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;
