对jQuery的$.get和$.load方法感到困惑

Question

在我的网站上，我想实现类似Facebook、Twitter和相对较小的Kotaku Gaming网站的AJAX页面加载。基本上，这就是我想做的：有一个标题，在域中所有页面上保持静态，并仅使用AJAX和jQuery将内容加载到特定容器中。jQuery的$.load() 函数几乎完美 - 但只是几乎。以下是我将要使用的代码：

$("#content").load("site.html");

然而，当使用此函数“加载”另一页时，URL 不会更改。这将破坏书签和链接，因此是不可接受的。URL 需要更改。 $.get() 的问题在于标头与页面的其余部分一起更改，这当然不是我想要的。

有人能帮我完成这个吗？如果上述网站可以做到，为什么我不能呢？

- LonelyWebCrawler

---

这可能是一个重复的问题，与https://dev59.com/K2025IYBdhLWcg3wQDlb相似。 - SpoonNZ

Answer 1

如何在不刷新页面的情况下更改页面URL？的第一个答案应该适合您——使用pushstate来推送新地址。请注意，这在旧版浏览器中无法正常工作，我建议最好的方法是回退到传统方法。

- SpoonNZ

---

你可以使用 History.js 来实现向后兼容性。 - bfavaretto

他们所说的“Object或String”是什么意思？ - LonelyWebCrawler

你需要传递一些参数，以便在用户点击“返回”按钮时，能够正确加载页面。我建议使用“oldpage.html”作为起点。然后可以设置一个popstate事件监听器来处理这个问题，更多信息请参见https://developer.mozilla.org/en/DOM/window.onpopstate（链接来源于上面的链接）。 - SpoonNZ

Answer 2

如果您希望每次页面加载时URL都发生变化，但标题保持不变，那么创建一个标题模板，然后更改每个页面的内容部分可能是值得的。

如果您正在使用类似PHP的东西，使用include/require或类似功能应该非常简单。

- Mercurybullet

---

是的，但如果我加载一个具有相同标题的新页面，该页面仍然会在一秒钟内变空，然后加载新站点。我希望标题在页面加载之间保持不变。 - LonelyWebCrawler

在这种情况下，您可以使用锚点和 window.location.hash 来组合一些内容 -- 大致思路是使用 ajax 替换内容，然后使用哈希 www.example.com/#/page1 作为后退按钮和书签的查找。 - Mercurybullet

这些锚点的技巧在于，您可以更改它们而无需重新加载页面并看到空白页面的闪烁。 - Mercurybullet

我从没想过这个！谢谢，我会研究一下的。 - LonelyWebCrawler