JQuery Mobile Back Button does not work with Cordova 1.9.0 and Android 2.2

一个人想着一个人 提交于 2019-12-02 17:21:32

问题


I've spent the last few hours pulling my hair out on what should be a simple problem.

I'm trying to make use of the backButton feature in JQuery mobile to build a site which has navigation icons. (It is my understanding that JQM simply calls window.history.back)

The site works perfectly as expected in a desktop browser, and mobile safari. The site does not work in Android WebView. (It's worth noting that the actual hardware 'clear' button works and takes the user back one page, but the JQM icon just highlights and goes nowhere.)

At some point I said screw it, and just called window.history.back myself, but this does nothing on the phone.

Here's the software:

  • JQuery Mobile 1.1.0
  • Cordova/PhoneGap 1.9.0
  • Android 2.2

I've looked at a number of questions already asked, but none of them provided solutions that appear to be valid in the 1.1.0/1.9.0 combination on Android. I've also tried Cordova 1.8 and 1.7, same problem.

Here is a simple page header:

<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>

Here is a call using the JQM built-in feature:

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

Here is a call using my own construct:

$(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>

Update

See this Gist for some examples of the forward navigation model. Notice the data-ajax="false" going to page 4.

Update 2 Updated gist to include a call to navigator.app.backHistory() as "Cordova Back". This works to go back and forth between physical pages, but fails to adhere to the JQM page DOM model. Any ideas on how to unify both? https://gist.github.com/3039722

I would prefer not to modify the core Cordova.js code, but rather add some listener in the app that takes care of this. Any ideas?

Thanks


回答1:


Works fine with cordova 1.9 and Android 2.2. Using back in three different way:

Override backbutton:

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

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

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

With data-rel=back

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

With click handler

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

...

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

For full source - https://gist.github.com/3037838



来源:https://stackoverflow.com/questions/11303489/jquery-mobile-back-button-does-not-work-with-cordova-1-9-0-and-android-2-2

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!