JQuery Mobile 后退按钮不适用于 Cordova 1.9.0 和 Android 2.2

Question

在过去的几个小时里，我一直在努力解决应该是一个简单的问题。

我正在尝试利用 JQuery mobile 中的 backButton 功能来构建一个具有导航图标的站点。 （据我了解JQM只是调用window.history.back）

该网站在桌面浏览器和移动 Safari 中完美运行。该站点在 Android WebView 中不起作用。 （值得注意的是，实际的硬件“清除”按钮起作用并将用户带回一页，但 JQM 图标只是突出显示而无处可去。）

在某个时候，我说了算了，然后我自己打电话给 window.history.back，但这在电话上没有任何作用。

这是软件：

• JQuery Mobile 1.1.0
• 科尔多瓦/PhoneGap 1.9.0
• Android 2.2

我查看了一些已经提出的问题，但没有一个提供在 Android 上的 1.1.0/1.9.0 组合中似乎有效的解决方案。我也试过 Cordova 1.8 和 1.7，同样的问题。

这是一个简单的页眉：

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="cordova-1.9.0.js"></script>

这是使用 JQM 内置功能的调用：

<a href="index.html" data-icon="back" data-iconpos="notext" data-direction="reverse" data-rel="back" data-transition="slide"></a>

这是使用我自己的构造的调用：

$(document).ready(function() {
$("#backButton").click(handleBackButton);
});

function handleBackButton() {
    window.history.back(); //Cordova does something funky with this on Android
}

...

<a id="backButton" href="index.html" data-icon="back" data-iconpos="notext" data-direction="reverse" data-transition="slide"></a>

更新

有关前向导航模型的一些示例，请参阅此 Gist。注意data-ajax="false" 转到第 4 页。

更新 2 更新了要点，包括对 navigator.app.backHistory() 的调用作为“Cordova Back”。这适用于在物理页面之间来回切换，但不符合 JQM 页面 DOM 模型。关于如何统一两者的任何想法？ https://gist.github.com/3039722

我不希望修改核心 Cordova.js 代码，而是在应用程序中添加一些监听器来处理这个问题。有什么想法吗？

谢谢

Answer 1

适用于 cordova 1.9 和 Android 2.2。以三种不同的方式使用back：

覆盖后退按钮：

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    document.addEventListener("backbutton", handleBackButton, true);
}

function handleBackButton() {
    console.log("back clicked");
    window.history.back();
}

与data-rel=back

<a data-rel="back" data-role="button">Rel Back</a>

使用点击处理程序

<a id="forceBack" data-role="button">Force Back</a>

...

$("#forceBack").click(function(){
    history.back();
});

获取完整源代码 - https://gist.github.com/3037838