android上的jquery mobile和phonegap后退按钮答案

【问题标题】：jquery mobile and phonegap back button on androidandroid上的jquery mobile和phonegap后退按钮
【发布时间】：2011-11-27 22:22:13
【问题描述】：

我正在尝试使用 jquery mobile 的 api 在我的 android 上创建一个移动应用程序。当我尝试将某些内容链接到另一个页面时，我点击了 android 后退按钮，出现了另一个页面，它不是我所在的原始页面。

<div data-role="page" id='home'>
<div data-role="content">
<a href='#next_page'>Next Page</a>
</div>
</div>

<div data-role="page" id='next_page'>
<div data-role="content">
Content
</div>
</div>

<div data-role="page" id='wrong_page'>
<div data-role="content">
Content
</div>
</div>

所以如果我在主页上，我点击链接“下一页”，我转到下一个页面，但是当我在 android 设备上点击后退按钮时，出现了错误的页面。知道为什么会发生这种情况吗？

谢谢！

【问题讨论】：

目前还没有线索，我确实看到一个错字：<div data-role="page id='wrong_page'> --> <div data-role="page" id='wrong_page'>
哦，肯定只是错字，但我的其他代码中没有错字。

标签： jquery android mobile jquery-mobile cordova

【解决方案1】：

您的 HTML 代码的语法可能有问题。你可以试试：

用jqm自动生成返回按钮，见“返回”按钮链接here
使用backbutton 的特定API 并硬编码您想要的函数。

【讨论】：

【解决方案2】：

如果您对页面使用不同的 HTML 文件，请在标签上使用 data-rel="back" 而不是“#(tagID)”，这会将您带到上一页。

否则，如果您在同一 HTML 文件中使用 DIV 进行分页。在你的 .js 文件中使用“.hide”来隐藏 div，除了你想显示的那个，像这样

$("#1stdiv").hide();
$("#2stdiv").hide();
$("#3stdiv").hide();
$("#4stdiv").show();
$("#5thdiv").hide();

要在后台历史记录中实现这一点，请实现堆栈并在您进入页面后立即将页面弹出到堆栈中，然后在后退按钮 onclick 上编写 onclick 函数，该函数应显示堆栈中的顶部元素。像这样

document.addEventListener("deviceready", onDeviceReady, false);
 function onDeviceReady(){
     document.addEventListener("backbutton", onBackKeyDown, false);
 }
function onBackKeyDown(){
   //hide all div except the div which is in top of stack 
 }

但在 phonegap 中使用时，请确保在 HTML 文件中添加 <script src="cordova.js"></script> 或 <script src="phonegap.js"></script>。

【讨论】：