如何使用JavaScript更改页面URL

Question

我对JavaScript更新，我正在开发一个网站，我希望能够在点击某个网站的某些元素时切换网址，而无需重新加载页面。

我希望它能像http://www.itemcycle.com一样工作，当你点击链接出售你的iPad或iPhone，然后选择你的模型。它显示不同的框，当你点击它们时，它会更改URL，但我知道它不会加载新页面，因为它不会将我滚动回顶部。

在此先感谢您的帮助！

Answer 1

你看到的是一个单页的应用程序

一个单页的应用程序（SPA），也被称为单页界面 （SPI），是适合于Web应用程序或网站单个网页 ，其目标是提供类似于 桌面应用程序的更流畅的用户体验。

它将通过使用某些JS框架来实现。 AngularJS是流行的。

Answer 2

试试这个：

window.location.href="/yourUrl"; 

Answer 3

HTML5引入了history.pushState（），它允许您添加和修改历史条目。

window.history.pushState('page1', 'Title', '/page1.php'); 

这可能值得一看。

Answer 4

有2周主要的方式将用户重定向，每个都有它的权衡：

1. 您可以通过改变window.location.href值用户到一个新的页面重定向。因此，例如window.location.href='https://example.com';会将用户重定向到https://example.com。注意这会做一个硬页面重新加载，所以页面实际上会重新加载。

2. 要更改url路径而不将用户重定向到新页面，您可以使用history.pushState。做这样的事情：

   history.pushState({}, "page 2", "/page2");

   会将该网址从https://example.com改变https://example.com/page2和滚动的立场不会改变。然后，您可以收听history.pushState的更改并相应地更新页面，让您可以查找效果。请注意，您无法更改网域（即您不能从https://example1.com到https://example2.com），但在正面，网页实际上不会重新加载。

正如其他人所指出的还有，让你可以做这种类型的事情各种框架，但这些框架正在利用我上面描述的技术。