Question

这是我将用作示例的网站： http://templatic.com/demos/geoplaces4/

当用户选择他们的城市时，jQuery是否可以淡化现有页面并加载到下一页，而无需实际刷新浏览器？我想这与Facebook的新响应链接的工作方式类似。

我只是不知道从哪里开始，我似乎无法找到任何信息，所以非常感谢任何链接/资源/提示。

Answer 1

您不能替换整个文档，也不会真正有意义。如果您正在交换整个文档，那么只需重新加载页面或加载新文档即可。

然而，您可以替换最顶层的文档元素 - 它是正文然后修改文档的标题以通常模拟相同的行为，但您必须手动管理更新的内容（即管理脚本和CSS装等等。）

进行“页面”交换的典型应用程序倾向于使用单个页面框架，然后将文档的主要部分交换进出 - 标题保持不变，只有关键标题被操纵。这是单页应用程序（SPA）背后的基本概念。

Answer 2

您已经将文档划分为大约2个分区，这些分区在城市选择器和地图显示页面之间保持相对固定。所以你可以在两个新内容中单独使用AJAX。为什么整个文件需要更换？我意识到这种方法最容易与你给定的框架相匹配，但我向你保证，这不是Facebook正在做的事情。

这种类型的单页应用程序背后的方法是这样的：

HTML

<body><!-- with a solid background color -->
    <div id="main-content">
        <header>
        </header>
        <div id="city-picker">
             <!-- city picker stuff here -->
        </div>
    </div>
 </body>

的Javascript

// inside On click/on select handler for your city picker
// Animate the fade-out of your first page
$('#main-content').hide(2000).html('')
    .load('ajax/city-map.php?theCity='+selectedValue).show(2000);

基本上就是 - 2秒淡出，只显示<body>标记的可靠背景，使用.load将新文档的html提取到{{1 div，以及2秒的淡入淡出。

这种依赖于即时的AJAX请求，这显然是不可能的。正确的做法是将其从.load完成函数回调中淡入。有关使用回叫的详细信息，请查看docs on .load。在开始淡出之前，您可以更高级并启动ajax，因此在用户观看内容淡出时请求正在进行。但这应该足以让你开始。

需要注意的另一件事是main-content基本上是调用.load，其中数据是AJAX请求的URL返回的整个响应。因此，如果您返回带有doctype，和标签的完全格式化的html文档，则不正确并且可能会破坏用户体验。

jQuery可以加载和替换整个网页（类似于iframe）吗？

2 个答案: