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