angular를 사용하여 브라우저 뒤로 버튼 클릭 이벤트를 감지하는 방법

angular를 사용하여 브라우저 뒤로 버튼 클릭 이벤트를 감지하는 방법

브라우저의 history back 버튼을 사용하여 사용자가 페이지에 들어간 것을 검출할 수 있습니까?바람직하게는 angular.js를 사용하여 이 동작을 검출하고 싶습니다.

각도 루팅을 사용하고 싶지 않습니다.또, 유저가 폼을 송신해, 서버에 정상적으로 송신해, 리다이렉트를 실시한 후에, 유저가 브라우저의 「뒤로」버튼을 사용해 폼으로 돌아갔을 경우에도 동작합니다.

여기 Angular를 사용한 솔루션이 있습니다.

myApp.run(function($rootScope, $route, $location){
   //Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to 
   //bind in induvidual controllers.

   $rootScope.$on('$locationChangeSuccess', function() {
        $rootScope.actualLocation = $location.path();
    });        

   $rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) {
        if($rootScope.actualLocation === newLocation) {
            alert('Why did you use history back?');
        }
    });
});

나는 이것을 시작하기 위해 런 블록을 사용하고 있다.먼저 실제 위치를 $rootScope.actualLocation에 저장한 후 $locationChangeSuccess를 듣고 이 경우 exualLocation을 새 값으로 업데이트합니다.

$rootScope에서는 로케이션 경로의 변경을 감시합니다.새 로케이션이 previousLocation과 동일한 경우 $locationChangeSuccess가 실행되지 않았기 때문에 사용자가 이력을 다시 사용했습니다.

보다 정밀한 솔루션(앞으로의 검출)을 원하신다면 Bertrand가 제공하는 확장 솔루션을 이용하십시오.

$rootScope.$on('$locationChangeSuccess', function() {
    $rootScope.actualLocation = $location.path();
});


$rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) {

    //true only for onPopState
    if($rootScope.actualLocation === newLocation) {

        var back,
            historyState = $window.history.state;

        back = !!(historyState && historyState.position <= $rootScope.stackPosition);

        if (back) {
            //back button
            $rootScope.stackPosition--;
        } else {
            //forward button
            $rootScope.stackPosition++;
        }

    } else {
        //normal-way change of page (via link click)

        if ($route.current) {

            $window.history.replaceState({
                position: $rootScope.stackPosition
            });

            $rootScope.stackPosition++;

        }

    }

 });

ui-routing은 아래 코드를 사용하고 있습니다.

안에서.App.run(),사용하다

 $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) 
 {

    if (toState.name === $rootScope.previousState )
       { 
          // u can any 1 or all of below 3 statements
         event.preventDefault();  // to Disable the event
         $state.go('someDefaultState'); //As some popular banking sites are using 
         alert("Back button Clicked");

       }
 else
      $rootScope.previousState= fromState.name;
   });

'$state'에서 'previousState' 값을 얻을 수 있습니다.ChangeSuccess' 이벤트도 다음과 같습니다.

    $rootScope.$on("$stateChangeSuccess", function (event, toState, toParams, fromState, fromParams) 
   {

        $rootScope.previousStatus = fromState.name;
    });

나는 그것이 오래된 질문이라는 것을 안다.어쨌든 :)

Bema의 답변은 훌륭해 보인다.단, (해시 없이) 'normal' url에서 동작하도록 하고 싶다면, 에서 반환된 경로가 아닌 절대 경로를 비교할 수 있습니다.$location.path():

myApp.run(function($rootScope, $route, $location){
//Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to 
//bind in induvidual controllers.

    $rootScope.$on('$locationChangeSuccess', function() {
        $rootScope.actualLocation = $location.absUrl();
    });      

    $rootScope.$watch(function () {return $location.absUrl()}, function (newLocation, oldLocation) {
        if($rootScope.actualLocation === newLocation) {
            alert('Why did you use history back?');
        }
    });
});

JavaScript에는 네이티브 이력 오브젝트가 있습니다.

window.history

자세한 내용은 MDN을 참조하십시오.https://developer.mozilla.org/en-US/docs/DOM/window.history?redirectlocale=en-US&redirectslug=window.history

멀티브라우저 지원으로 얼마나 좋은지 모르겠어요.

갱신하다

위에서 말한 것은 Gecko 타입의 브라우저 전용인 것 같습니다.

다른 브라우저의 경우history.js; https://github.com/browserstate/history.js

그래서 @Bema의 답변을 TypeScript로 변환했습니다.그것은 다음과 같습니다.

namespace MyAwesomeApp {
    // ReSharper disable once Class
    function detectBackButton(
        $rootScope: ng.IRootScopeService,
        $location: ng.ILocationService
    ) {
        let actualLocation: string = '';

        $rootScope.$on('$locationChangeSuccess',
            () => {
                actualLocation = $location.path();
            });

        $rootScope.$watch(() => $location.path(),
            (newLocation: string, oldLocation: string) => {
                if (actualLocation === newLocation) {
                    //$rootScope.$broadcast('onBackButtonPressed', null);
                }
            });
    }

    detectBackButton.$inject = [
        '$rootScope',
        '$location'
    ];

    angular
        .module('app')
        .run(detectBackButton);
}

우리는 이 데이터로부터 자산을 생성하지 않아도 됩니다.$rootScope서비스, 로컬에서 '로케이션 변경 성공' 및 '로케이션 변경 완료' 코드를 모두 닫을 수 있습니다.actualLocation변수.거기서부터, 원래의 코드와 같이, 당신이 하고 싶은 것은 무엇이든지 할 수 있습니다.저로서는 개별 컨트롤러가 필요한 모든 작업을 수행할 수 있도록 이벤트를 브로드캐스트하는 것을 고려하고 있지만, 필요하다면 글로벌 액션을 포함할 수도 있습니다.

좋은 답변 감사합니다.그리고 이것이 다른 타이프 스크립트 사용자에게 도움이 되었으면 합니다.

이 문제에 대한 나의 해결책은

app.run(function($rootScope, $location) {
    $rootScope.$on('$locationChangeSuccess', function() {
        if($rootScope.previousLocation == $location.path()) {
            console.log("Back Button Pressed");
        }
        $rootScope.previousLocation = $rootScope.actualLocation;
        $rootScope.actualLocation = $location.path();
    });
});

뒤로 버튼을 누르면 각도가 $routeChangeStart 이벤트만 발생하며 $locationChangeStart는 발생하지 않습니다.

언급URL : https://stackoverflow.com/questions/15813850/how-to-detect-browser-back-button-click-event-using-angular