Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Problems with window.history using JQuery/Javascript on Cordova app in IOS9

I'm having trouble with a Cordova app under IOS9 (beta). I'm using latest Cordova and JQuery mobile builds. The window.history is not getting updated which is causing the following failures:

  • window.history.go(-1) fails to go back a page
  • window.history.length is stuck at 1 even if you navigate three pages deep
  • Links marked in jQuery as data-rel="back" fail to go back when pressed

I've put together the following sample code which fails when run as a separate Cordova app under IOS9(beta) but works properly if you run it from an IOS9(beta) browser (link below). The fact that it runs from the mobile browser but not as an app leads me to believe it may be a Cordova issue.

In the sample - there are three pages. Navigating from Home->Options->HopOpts and then hitting the cancel button should take us back a page but does not in the cordova app. I've separately tried attaching a button handler to that button and confirmed that window.history has a depth of 1 (should be 3) and also window.history.go(-1) fails to move back.

The sample HTML file is here: http://home.jejaju.com/BeerSmith2.html

To run it under Cordova as an app, you need to remove the comment blocks around the "Cordova.js" line near the top. As I point out above it works properly in a browser, even on an IOS9 browser, but the cancel button fails as a standalone cordova app.

So the question is does anyone have a clue why window.history is not updating and back links don't work properly for this simple Cordova app and IOS9(beta)? The only thing changed in the two test cases is Cordova.js.

like image 252
user1626382 Avatar asked Aug 24 '15 16:08

user1626382


1 Answers

I see this was a couple weeks ago, but I'll post this in case someone else runs into it. It sounds like it may be related to navigation events generated by a hash change in iOS 9. If so, you can add this to your index.html to disable the hash listening:

(needs to go between the jquery.js and jquery.mobile-1.4.5.js as shown here)

<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript">
  $(document).bind("mobileinit", function(){
      $.mobile.hashListeningEnabled = false;
  });
</script>  
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.5.js"></script>
like image 152
Mike M Avatar answered Oct 19 '22 17:10

Mike M