如何使用JavaScript更改页面URL

Question

我是JavaScript的新手，我正在一个网站上工作，当我点击网站的某些元素而不重新加载页面时，我希望能够切换URL。

当您点击链接销售iPad或iPhone然后选择您的型号时，我希望它像http://www.itemcycle.com一样工作。它显示了不同的框，当您点击它们时，它会更改网址，但我知道它没有加载新网页，因为它不会将我滚动回到顶部。

提前感谢您的帮助！

Answer 1

您所看到的是单页应用程序

  

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

这将通过使用某些JS框架来实现。 AngularJS是最受欢迎的。

Answer 2

试试这个：

window.location.href="/yourUrl";

Answer 3

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

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

这可能值得一看。

Answer 4

有两种主要方式可以重定向用户，每种方法都有权衡：

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

2. 要更改网址路径而不将用户重定向到新网页，您可以使用history.pushState。做类似的事情：

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

   会将网址从https://example.com更改为https://example.com/page2，滚动位置不会更改。然后，您可以收听history.pushState的更改并相应地更新页面，从而为您提供所需的效果。请注意，您无法更改域名（即您无法从https://example1.com转到https://example2.com），但从正面看，该页面实际上不会重新加载。

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