Question

在我的应用程序是用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转到某个页面，然后点击浏览器后退按钮，网址将会更改，但页面赢了＆＃ 39;重新加载。

我该如何解决？

Answer 1

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

Answer 2

我在两个应用程序之间有两个完全相同的问题。

由于旧的应用程序没有使用HTML5历史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是否与onopopstate上的位置不同。

这样我就不必将target =“_ self”添加到返回旧样式页面的所有链接。

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

2 个答案: