Question

我从文档中读到我们可以使用以下代码处理后退按钮：

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

我担心的是我有一个HTML5网页，其中我有多个div标签，我根据用户从菜单选项中选择的导航选项使用jQuery进行动画制作。

如何在此单页面webapp中使用PhoneGap处理后退按钮，并向用户显示之前设置的动画div。再次点击后退按钮会再次将他带到当前上一个div的前一个div： - ）

感谢。

Answer 1

我通过创建全局数组变量

解决了这个问题

var myStack = new Array();

然后每当我点击div标签时，我都会在myStack变量中插入函数原型和参数。例如：

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

然后，使用我在我的问题中发布的代码，在BackButton处理程序中，我编写了以下代码：

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

希望这有助于其他人。

Answer 2

我将发表处理这种情况的整体想法。希望您可以根据自己的需要即兴发挥并改变它。

有一个全局变量来记住当前的div id 可见。例如，单击菜单项x时，将其设置为全局变量到当前可见的div id（在显示与菜单项x对应的下一个div之前）。
按下后退按钮时，使用全局变量的值来标识前一个div。隐藏当前div并显示上一个div。

Answer 3

我在类似结构的phonegap应用程序中进行了实现。我的情况有点复杂，因为我通过ajax加载html和外部数据（而不仅仅是取消隐藏div）。我创建了一个名为history的全局数组，我用它来跟踪当前位置以及之前的位置（这里的位置是最近调用的ajax函数，因此数组实际上将函数名称存储为文本）。 .pop和.push数组方法的正确顺序和组合为我提供了一个功能齐全的js后退按钮，可以很好地缩放并处理我能想到的任何类型的来回导航。

如何使用PhoneGap处理单个HTML页面Web应用程序中的Android Back Button？

3 个答案: