如何用jQuery选择和替换整个页面
Posted
技术标签:
【中文标题】如何用jQuery选择和替换整个页面【英文标题】：How to select and replace the whole page with jQuery 【发布时间】：2010-10-22 01:28:51 【问题描述】：我的页面设计迫使我使用通过 ajax 加载的 html 刷新整个页面。
$('html').replaceWith(data);
给我错误。有什么想法吗？
【问题讨论】：
请发布错误和数据内容 html 标签中不包含正在执行替换的脚本吗？如果您使用的是 body 标签，请确保您的 html 适合。 【参考方案1】：我遇到了同样的问题，但这没有帮助。
如果你还需要替换<head>标签（所以，整个页面），你也可以这样做
document.write(newPage);
【讨论】：
我知道这是一个老问题，但为了将来的参考，这可行，但您必须了解它可能会留下旧的 DOM 脚本处理程序并导致内存泄漏。 谢谢。它比我能想到的任何其他解决方案都好用。【参考方案2】：使用正文：
$('body').replaceWith(data);
【讨论】：
虽然这不会替换 head 部分，它可能需要加载必要的 javascript 和 CSS 文件才能正确呈现页面。 实际上，jQuery 确实可以执行任何嵌入的 javascript。 CSS 样式表绝对会被应用。只要意识到您已删除的 CSS 样式表仍保留在规则集中，它们不会被删除。【参考方案3】：我遇到了一些问题
$("body").replaceWith(newPage)
给了我一些奇怪的 css 问题，但这很好用：
$("body").html(newPage);
【讨论】：
【参考方案4】：这可能是您需要的解决方案，它会替换整个文档，包括其头部。加载新的 css、js 和其他资源不会有任何问题。我假设您通过调用 REST api 收到新的 html 内容：
$.ajax(
type: 'POST',
url: form.attr('action'),
data: form.serialize(), // serializes form elements
success: function(response)
// re-writes the entire document
var newDoc = document.open("text/html", "replace");
newDoc.write(response);
newDoc.close();
);
【讨论】：
【参考方案5】：使用“body”选择器执行时 jQuery.replaceWith 和 jQuery.html 的奇怪行为。通话结束后你松开 body 标签：
$('body').replaceWith('<body>New body</body>');
其他选择器不会发生这种情况：
$('title').replaceWith('<title>New title</title>');
此外，jQuery.html 不会将 body 标签加倍（就像它对其他标签所做的那样），并且在像这样调用时像 replaceWith 一样操作：
$('body').html('<body>New body</body>');
我希望这不是 jQuery 的灰色地带。或者，如果是，他们不认为要修复它。我有一些应用程序，我在应该使用 $('body').replaceWith 时使用 $('body').html。
【讨论】：
以上是关于如何用jQuery选择和替换整个页面的主要内容，如果未能解决你的问题，请参考以下文章