如何使用 PhoneGap 在单个 HTML 页面 webapp 中处理 Android 的后退按钮单击？

Question

I read from the documentation that we can handle the back button click using the following code:

document.addEventListener("backbutton", backKeyDown, true); 
function backKeyDown() { 
     // Call my back key code here.
    alert('go back!');
}

My concern is that I have a single HTML5 web page in which I have multiple div tags which I animate using jQuery as per the navigation option selected by the user from the menu options.

How can I, in this single page webapp, handle the back button click using PhoneGap and show the user the previously animated div . Clicking on the back button again would again take him to the previous div of the current previous div :-)

Thanks.

Answer 1

I solved the problem by creating a global array variable as

var myStack = new Array();

Then whenever I clicked on the div tag, I inserted the function prototype along with the arguments inside the myStack variable. For eg:

myStack.push(\"myfunction(args1, args2);\");

Then, using the code which I posted in my question, inside the BackButton handler, I wrote the following code:

var divToShow = myStack.pop();
eval(divToShow);

Hope this helps others.

Answer 2

I will just post my overall idea of handling this situation. Hope you can improvise and change it to suit your needs.

1. Have a global variable to remember the current div id that is visible. For example, when a menu item x is clicked, set this global variable to the div id that is currently visible (before showing the next div corresponding to menu item x).
2. When the back button is pressed, use the global variable's value to identify the previous div. Hide the current div and show the previous one.

Answer 3

I did an implementation in a similarly structured phonegap app. My situation was a bit more complex because I was loading in html as well as external data via ajax (rather than just unhiding divs). I created a global array called history which I used to keep track of current position as well as previous positions (position here being the most recent ajax function called, so the array was actually storing function names as text). The right sequence and combination of.pop and.push array methods got me a fully functioning js back button that scaled nicely and handled any kind of back and forth navigation I could think of.