如何使用AngularJS刷新（F5）并获取另一个页面？

Question

在我的Web应用程序中，我有两个不同页面上的表单，purchase1和purchase2。

如果客户在purchase2刷新页面，我希望位置会改回purchase1。

我还没有找到实现这一点的方法，我尝试创建了一个类似于以下配置的内容：

.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.when('/purchase2', '/purchase1');
}

但显然，这样我永远无法到达purchase2页面。

我需要它仅在手动用户刷新时发生。

有没有办法这样做？是否有一些内置的Angular函数会在刷新时触发？

类似于

$scope.onRefresh = function(){
   $location.path('/dashboard/purchase1');
}

我从未见过这样的东西。

- Guy Ben-Moshe

---

你是否反对使用jQuery？ - Andrew Bone

嗯，我对Jquery不熟悉，我在前端开发方面还是个新手，在我的应用程序中，我正在使用js-html5-css。 - Guy Ben-Moshe

Answer 1

你可以监听 beforeunload 事件。当有人按下 F5 或以任何方式刷新页面时，将触发 beforeunload 事件。可以这样做：

var windowElement = angular.element($window);
windowElement.on('beforeunload', function (event) {
    event.preventDefault();
    //below is the redirect part.
    $window.location.href = '/purchase1';
});

将此代码放在购买2页面上。

- Sudhansu Choudhary

---

我已经在模块函数中添加了 $window，但是仍然刷新页面并停留在 purchase2。 - Guy Ben-Moshe

$window未定义出现了错误，但我已将其添加到模块函数中，刷新仍然停留在那里。 - Guy Ben-Moshe

注意，onbeforeunload会在每次页面卸载时被调用，例如刷新，重新路由，关闭窗口等。在实施之前，请务必进行检查。 - Rajesh

jQuery包含在内吗？尝试包含jQuery。 - Sudhansu Choudhary

在引入AngularJS之前，先引入jQuery。在引入AngularJS之前，先引入jQuery.js文件。 - Sudhansu Choudhary

是的，你可以这样做，但是你需要在文档上添加一个 keypress 事件。另外，我不确定你能否在 beforeUnload 事件中获取 keyCodes。而且，如果用户点击刷新事件而不是按下 F5，则此检查将被跳过。 - Rajesh

Answer 2

是的，您可以做到。

注册全局状态改变监听器：

$scope.$on('$stateChangeStart', function(event, toState, toParams, fromState) {
    // If fromState is null that means it is a page refresh otherwise
    // The fromState will be the purchase1
    if (toState.name == 'purchase2' && !fromState) {
        $state.go('purchase1');
        event.preventDefault();
        return;
    }
});

我指的是在一个控制器中注册上述内容，并使其作用域在整个应用程序中可用，就像向您的或标签添加控制器一样。

此外，我假设purchase1和purchase2是两个页面的状态名称。如果它们是公共状态的参数，则可以更改上面的代码。

- Shashank Agrawal

---

rootScope可以作为全局监听的选项，我的理解正确吗？ - Sudhansu Choudhary

Answer 3

最终，如果有人感兴趣，我是这样修复它的：

在purchase1.js中，我已经在submit()函数中添加了以下内容：

$rootscope.demographic=1;

在 purchase2.js 中，我已经在控制器中添加了以下代码：

var init = function(){
      if(angular.isUndefined($rootScope.demographic)){
           $location.path('/purchase1');    
      }

    };
    init();

它能够工作是因为刷新(F5)会完全重新启动应用程序，因此也会重置$rootscope并使“人口统计”未定义。

进入purchase2时，“init”函数将启动，如果我们来自purchase1，则一切都将正常，并且人口统计将被定义，否则我们将再次加载purchase1。

:)

- Guy Ben-Moshe

Answer 4

$state.go('purchase1'); 

这应该解决你的问题。

- Eshwer Gowda K V

Answer 5

刷新操作所发生的事情与首次加载时相同。

您可以做的是检查用户之前是否已经访问过此页面，例如通过设置一个cookie并稍后读取它来进行检查。

然而，我认为您应该重新考虑您的设计。为什么要将时间投入到使刷新功能表现更差的地方呢？

- zvone

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Guy Ben-Moshe

Answer 6

我认为JavaScript不是最佳方案，因为JavaScript对于之前的页面一无所知，因为页面加载后才会渲染。因此，请尝试在服务器端应用程序中检查此内容，例如在PHP或JSP中读取请求头，因为您可以在那里获取当前URL并将用户重定向到新的URL。

- Tobi

Answer 7

你可以尝试设置一个名为purchase2-loaded的标志，并将此变量保存在localStorage中。然后，你可以编写一个IIFE，检查此变量的值并重定向到purchase1。

同时，在purchase1上，将其重置为false。

注意：这是纯JS代码，依赖于localStorage。 Fiddle。

示例代码

(function(){
  var isPurchase2Loaded = localStorage.getItem("Purchase2");
  if(isPurchase2Loaded || isPurchase2Loaded === undefined){
    document.write("Rerouting to purchase 1...");
  }
  else{
    document.write("Loading for the first Time...");
    localStorage.setItem("Purchase2", true);
  }
})()

- Rajesh