jam*_*mes 9 html jquery in-place
我试图避免使用数据URI,因为我不希望生成的文档存储在浏览器的历史记录中.是否可以就地替换整个HTML文档？
我试过了jQuery("html").html("<html>....</html>"),但style信息无法生存.
T.J*_*der 14
你可能想这样做:
jQuery("body").html("new content");
... "new content"理想情况下,只包括通常出现在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>
因此,如果您将"页面"分开加载到头部和身体部位,则可以轻松地将其更新到位.
| 归档时间： |
|
| 查看次数： |
22650 次 |
| 最近记录： |