替换整个HTML文档 [英] Replace entire HTML document in-place
问题描述
我试图避免使用数据URI，因为我不想将生成的文档存储在浏览器的历史记录中。
我试过 jQuery（html）。html（< html> ....< / html>），但是样式信息不会存在。
jQuery（body ）.html（新内容）;
...其中新内容理想情况下只包含通常出现在 body 元素中的标记，而不包含其余部分。这将取代body元素的内容，同时只留下 head （如样式表信息）中的任何内容。如果你还想更新标题，你可以通过 document.title =new title;
Edit 我不知道如何替换 html 元素中的所有内容，这是否可行，以及会发生什么。所以我这样做：
<！DOCTYPE HTML>
< html>
< head>
< meta http-equiv =Content-typecontent =text / html; charset = UTF-8>
< title>测试页< /标题>
< style type ='text / css'>
body {
font-family：sans-serif;
font-weight：bold;
颜色：蓝色;
}
< / 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'， （'click'）;
$（'＃btnHiThere'）。live（'click'，sayHi）;
}
function changePage（）{
$（'html '）.html（
< head>< \ / head>+
< body>+
< input type ='button'id =' < \ / p>+
< \ / body><
）;
}
函数sayHi（）{
alert（Hi there）;
}
}）（） ;
< / script>
< / head>
< body>
< input type ='button'id ='btnHiThere'value ='Click for Alert'>
< input type ='button'id ='btnChange'value ='更改页面>
< p>请注意，此文字当前以无衬线，粗体，蓝色字体显示。< / p>
< / body>
< / html>
结果非常有趣 —我最终得到一个DOM结构，它根本没有头或 body 头和 body 的后代内。这可能是搞乱新内容中（新）样式的东西。我直接获得了基本相同的结果设置 innerHTML （这可能是为什么它在jQuery中不起作用; jQuery使用 innerHTML 当它可以时，虽然它是非常复杂的关于不这样做时，它不能）;而如果我通过 document.createElement通过显式创建头和 body 元素来做类似的事情和 document.appendChild ，它可以工作。
肯定意味着这是比它的价值更多的努力。
但是：请注意，更改 body 元素似乎工作得很好：
<！DOCTYPE HTML>
< html>
< head>
< meta http-equiv =Content-typecontent =text / html; charset = UTF-8>
< title>测试页< /标题>
< style type ='text / css'>
body {
font-family：sans-serif;
font-weight：bold;
颜色：蓝色;
}
< / 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'， （）;
$（'＃btnHiThere'）。live（'click'，sayHi）;
}
function changePage（）{
$（'head '）.html（
< style type ='text / css'> \\\
+
body {color：green;} \\\
+
< ; \ / style> \\\
）;
$（'body'）。html（
< input type ='button'id ='btnHiThere'value =' < \ / p>
;
}
$ b $< \ / p>+
< p>请注意这段文字的外观。 b函数sayHi（）{
alert（Hi there）;
}
}）（）;
< / script>
< / head>
< body>
< input type ='button'id ='btnHiThere'value ='Click for Alert'>
< input type ='button'id ='btnChange'value ='更改页面>
< p>请注意，此文字当前以无衬线，粗体，蓝色字体显示。< / p>
< / body>
< / 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?
I tried jQuery("html").html("<html>....</html>"), but the style information does not survive.
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";
Edit I got to wondering about replacing everything inside the html element, whether that would work, and what would happen. So I did this:
<!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.
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.
这篇关于替换整个HTML文档的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
