javascript - 更改 html 内容和 url，无需像 Facebook 导航菜单那样重新加载页面

Question

我有一个包含 2 个 html 页面(contact.html 和 index.html)的网站。我的网站中有一个菜单侧边栏和一个内容 div。

我想要两件事:

1.从菜单在 2 个 html 页面之间切换，但无需重新加载整个页面。我想使用 JavaScript 或 jQuery 在我的内容 div 中加载这些 html 页面，并更改 URL。

2.我希望这些 html 页面可以通过单独的 URL 访问。

该网站的最佳结构是什么？我正在考虑像 Structure.html 这样的 html 文件，其中包含侧边栏和内容 div，如果用户想要加载 mydomain.com，则加载 Structure.html 并在内容 div 中加载 index.html，如果用户想要加载 mydomain .com/contact，加载struct.html并在content div中加载contact.html。但我现在不知道如何。

每个页面应该有 2 个 html 文件吗？例如联系页面:一个 html 文件用于从 mydomain.com/contact 访问，另一个用于使用 ajax 加载内容 div 并从菜单访问。

Answer 1

您可以通过操作 DOM 来更改页面内容而无需重新加载。有一个extensive API为此，我们与数百个图书馆一起实现了这一目标。

更改 url 而不重新加载使用 history pushState API (参见history.pushState and jQuery)。

库

• jQuery - 简单的 DOM 操作
• React - facebook 使用什么来操作 DOM。
• Ember - 一款适用于单页应用程序的出色的多合一框架。