Implementing Back Button functionality for wp8 cordova application

Question

I tried to implement the back button functionality in my wp8 cordova application , which on pressing the hardware back button on device should navigate to the previous page of the app .

What i have done

function onLoad() {
    document.addEventListener("deviceready", init, false);
    document.addEventListener("resume", onResume, false);
    document.addEventListener("backbutton", onBackKeyDown, false);
}

function init() {
  //some code
}

function onResume() {
  //some code   
}

function onBackKeyDown() {
   window.history.back();
   return false; 
}

I also tried replacing the "window.history.back();" with "navigator.app.backHistory();" which also doesnot seems to work

Then i tried putting the code in try catch block

try
{
navigator.app.backHistory();
//window.history.back(); 
}
catch (e)
{
console.log("exception: " + e.message); 
}

which also seems to fail .Whatever I do the app seems to exit out of the app rather than moving backward and the funny thing is when i try this in the IE console it seems to work perfectly

Please help with this guys

Thanks in advance

Please add the 10 Lines of code before and after your "addEventListener("backbutton...". — Sithys, Apr 21 '15 at 06:29
The EventListener for the Backbutton will only work if you have a deviceready eventlistener which calls the backbutton eventlistener if the deviceready is successfully fired. — Sithys, Apr 21 '15 at 10:25
hi @Sithys my code will look like this function onLoad() { document.addEventListener("deviceready", init, false); document.addEventListener("resume", onResume, false); document.addEventListener("backbutton", onBackKeyDown, false); } function onBackKeyDown() { window.history.back(); return false; } something like that — Ranjith Varma, Apr 21 '15 at 10:27
Could you please edit that inside your first post and into a code tag? — Sithys, Apr 21 '15 at 10:30

score 6 · Answer 1 · answered Apr 21 '15 at 10:41

So lets try another way which should work for wp8. This Method requires the WinJS Framework and will work like this:

In the onDeviceReady function you're going to use this code:

if (device.platform == "windows") {
    // Get the back button working in WP8.1
    WinJS.Application.onbackclick = function () {
        onBackKeyDown();
        return true; // This line is important, without it the app closes.
    }
}
else {
    document.addEventListener("backbutton", onBackKeyDown, false);
}

Now just add a function to handle the onBackKeyDown event and that's it:

function onBackKeyDown() {
    // Back key pressed, do something here
}

The standard method of Cordova to hook into the BackButton-Event would look like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Back Button Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <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() {
    }

    </script>
  </head>
  <body onload="onLoad()">
  </body>
</html>

Important here is to call the BackButton-Event inside the DeviceReady function!

Hi, doesnot seems to work in the way i wanted the app is navigating back but to the first page skips every intermediate pages Thanks in advance — Ranjith Varma, Apr 21 '15 at 11:25
Did i understand you correct, the function i posted navigates you to the first page every time you click it independent of the page you actually are? Please provide the code you bound to the onBackKeyDown function — Sithys, Apr 21 '15 at 11:27
Hi already tried can u give the email so that i can send you a sample code so that you can reproduce the problem. — Ranjith Varma, Apr 21 '15 at 11:32
I would like to help you, but i don't have a WP8 mobile Phone. Look into this question and try the solutions given there. Let me know if that doesn't help you. http://stackoverflow.com/questions/16542118/phonegap-navigator-app-backhistory-not-working-on-html-back-button — Sithys, Apr 21 '15 at 11:36

Implementing Back Button functionality for wp8 cordova application

1 Answers1