Замените весь оперативный документ HTML
Я стараюсь не использовать данные URI, потому что я не хочу, чтобы сгенерированный документ был сохранен в истории браузера. Действительно ли возможно заменить весь оперативный документ HTML?
Я попробовал jQuery("html").html("<html>....</html>"), но style информация не выживает.
1 ответ
Вероятно, вы захотите сделать следующее:
jQuery("body").html("new content");
... где «новый контент» в идеале будет включать только разметку, которая обычно появляются в элементе body , а не в остальном. Это заменит содержимое элемента body, оставив все, что у вас есть в head (например, информацию о таблице стилей). Если вы также хотите обновить заголовок, вы можете сделать это с помощью document.title = "new title";
Edit Мне интересно было заменить все внутри ] 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, у которой вообще нет головы или тела , просто 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>
Итак, если вы разделите "страницу" "вы загружаете в части головы и тела, вы можете легко обновить его на месте.