window.history.back returning only one page

Question

I have a problem with window.history.back(), for he is returning only one page.

I use the following function:

        <script type="text/javascript" charset="utf-8">

        // Wait for device API libraries to load
        //
        function onLoad() {
            document.addEventListener("deviceready", onDeviceReady, false);
        }

        // device APIs are available
        //
        function onDeviceReady() {
            // Register the event listener
            document.addEventListener("backbutton", onBackKeyDown, false);
        }

        // Handle the back button
        //
        function onBackKeyDown() {
            if($('.upage:visible').attr("id") == 'listar_CELULAS'){
                var r=confirm("Você realmente deseja sair do aplicativo ?");
                if(r==true){
                    navigator.app.exitApp();
                }else{

                }
            }else{
                console.log("ta entrando aqui");
                window.history.back();
            }
        }

    </script>

I need to return everyone to the starting point of the stack. To place on the stack history use this function:

function activate_page(sel, have_state)
{
    var $dn = $(sel);
    var is_vis = $dn.is(":visible");
    if(!is_vis)
    {
        $dn.parents("body").find(".upage").addClass("hidden");
        $dn.removeClass("hidden");
    window.history.pushState({upage:sel}, sel, document.location.origin + document.location.pathname +sel);
    $(document).trigger("pagechange");
    }
}

Probably Ionic is part of this problem, in fact I’m not really understanding the moment that each one is doing something, follow my Ionic code:

angular.module('ionic')
  .run(function($ionicPlatform,$ionicPopup, $state,$ionicHistory){
    $ionicPlatform.registerBackButtonAction(function (event) {
      //console.log(window.history);
      if($state.current.name=="app.listar_CELULAS"){
        alert("entro aqui");
        navigator.app.exitApp();
      }
      else {
        //window.history.back();
      }
    }, 100);
});

Here is the function that theoretically populates the history of visited pages:

function activate_page(sel, have_state)
{
    var $dn = $(sel);
    var is_vis = $dn.is(":visible");
    if(!is_vis)
    {
        $dn.parents("body").find(".upage").addClass("hidden");
        $dn.removeClass("hidden");
        window.history.pushState({upage:sel}, sel, document.location.origin + document.location.pathname +sel);
        console.log(window.history);
        $(document).trigger("pagechange");
    }

}

Where is the error ?

Thanks for now.

Answer 1

The windows.history.back() returns only one page, if you want to return more pages you should use windows.history.go(-2) for example.

• This history.go(-1) amounts to this history.back()
• This will return two pages: history.go(-2)

Negative history.go(-x) backward and positive history.go(x) advance the specified quantity (exchanging x for an integer number).

Using events from Cordova

The button itself document.addEventListener("backbutton" ...) is already an event to return, do not need to use window.history.back again, the page is already coming back, just do so:

    function onBackKeyDown() {
        if($('.upage:visible').attr("id") == 'listar_CELULAS'){
            var r=confirm("Você realmente deseja sair do aplicativo ?");
            if(r == true){
                navigator.app.exitApp();
            }else{

            }
        }else{
            console.log("Voltou uma página");
        }
    }

Back to the beginning

There is also the property history.length, with it you can know how many pages have already advanced in total and apply in the parameter of history.go(x), apparently the number of pages passed on on it has to want an exact number less the current page, ie if you have navigated 20 times and use history.go(-50) nothing will happen. So try it like this:

window.history.go(-(window.history.length - 1));

Documentation:

• Mozilla: https://developer.mozilla.org/en-US/docs/Web/API/History
• Internetexplorer/Edge: https://msdn.microsoft.com/en-us/library/ms536443(VS.85). aspx

Example of use:

• First click on the button Pager as many times as you want and watch the browser navigation buttons (right here on the website).
• Then click the button Go back to the beginning and watch again the browser navigation buttons.

function inicio() {
    window.history.go(-(window.history.length - 1));
}

function paginar() {
    var current = parseInt(String(window.location.hash).replace(/^#/, ""));

    if (isNaN(current)) {
        window.location.hash = "1";
    } else {
        window.location.hash = ++current;
    }
}

<button onclick="paginar();">Páginar</button>
<button onclick="inicio();">Voltar ao começo</button>