更改 window.location.href 后浏览器后退按钮无法正常工作答案

【问题标题】：Browser back-button does't work correctly after window.location.href was changed更改 window.location.href 后浏览器后退按钮无法正常工作
【发布时间】：2015-12-05 10:28:38
【问题描述】：

在我的应用程序是用 jQuery 编写并且不是 SPA 之前。我已经将一些页面重写为 AngularJS 并使其成为 SPA。

现在我需要在这些应用程序之间进行适当的通信。因为当我从 Angular 页面转到 Angular 页面时，我不想重新加载页面，但是当我转到 jQuery 页面时，我确实想重新加载页面，以便服务器可以向我发送其他源文件。强>
因此，当链接转到 Angular 页面（来自 Angular 页面）时，很简单：

<a href="store/categories">

并且ui-router 捕获"store/categories"，更改状态并且它不会重新加载页面。

但是，如果链接转到 jQuery 页面（来自 Angular 页面），我不能只指定 <a href="store/categories">，因为 ui-router 会捕获它并且页面不会重新加载。

然后我决定使用window.location.href强制页面重新加载：

<a href="store/categories" ng-click="$root.newHref('store/categories')">

$rootScope.newHref = function(url) {
   var url = ROOT_URL + urlBody; // ROOT_URL is just a protocol with host name
   window.location.href = url;
};

它奏效了！当您现在单击该链接时，它将使用正确的 URL 重新加载页面。

但是，如果您使用window.location.href 访问页面，然后单击浏览器返回按钮，URL 将更改，但页面不会重新加载。

我该如何解决？

【问题讨论】：

标签： javascript jquery html angularjs angular-ui-router

【解决方案1】：

使用target="_self" 代替window.location.href。

【讨论】：

谢谢，它就像一个魅力，比使用ui-router捕获简单得多！

【解决方案2】：

我在 2 个应用程序之间来回切换时遇到了完全相同的问题。

由于旧应用程序没有使用 HTML5 History API 功能，我通过在旧网站页面中添加这段 javascript 来解决此问题（在旧网站中所有页面加载的 JavaScript 文件中：

//This will fix a bug with browsers history back API after a window.location from within our Angular apps.
(function () {
  var locationOnPageload = location.href;
  window.onpopstate = function (event) {
    if (location.href !== locationOnPageload) {
      document.location.reload();
    }
  }
})();

由于移动设备上的 Safari 在页面加载时触发“onpopstate”，我添加了检查页面加载上的 href 是否与位置 onpopstate 不同。

这样我就不必将 target="_self" 添加到返回到我们旧样式页面的所有链接中。

【讨论】：