JQuery Mobile Back Button On Facebook with Chrome

[ProdigyView]

So I'm creating this sample application using JQuery Mobile on Facebook. The problem I am running into is with the back button on chrome.

http://www.facebook.com/pages/ProdigyView/214942945205059?sk=app_397015110360498

Using firefox or safari, I can use the back button and go the 'page' I was previously on after clicking a link.

Using Chrome, when I click the back button, it

A) First Click doesn't go anywhere B) Second click takes you back to the page you were on, if you came from another site

Doing some research, this is very similar to this problem last year: http://blog.duc.as/2011/07/13/back-button-broken-for-url-hashes-in-ie-on-wp7-mango/

Anyone know what the problem is and a possible fix?

[jwent]

Did you aver solve this problem? I am having the same issue.

[jaspermdegroot]

I think the problem here is that the JQM app is running in an iframe. So this doesn't seem related to that WP7 Mango issue.

@ProdigyView @jwent - Could you please test with latest code? Thanks!

  <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"> 
  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>

[jwent]

I think the problem is how Chrome handles history in an iframe - maybe specifically the FB frame ... it happens to me with other FB apps that I have written that load a new page after the home page is displayed inside the FB canvas - the menu back button does nothing on the first click and then on the second click it takes me to the history item before the FB app home page ... this only happens in Chrome - I have version 24.0.1312.52 - since JQM uses (I am assuming) browser history mechanism for various things like to 'unpop' a popup for instance - this is why prodigyview is seeing this.

[jwent]

I have a demo here . https://www.facebook.com/pages/Bitest/419336234782524?sk=app_286044061504769 click on the Format button at the bottom menu or toolbar for the popup - hit escape nothing happens - hit it again and blambo - history back to the FB page.... here is the server URL that delivers the frame contents - works fine. http://jwent.dev.hcpdts.com/mobile

[jaspermdegroot]

@jwent

I get to see a 501 error (security) when I visit that Fb page. Does it work with ajaxEnabled and/or pushStateEnabled set to false?

<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).on("mobileinit", function(){
  $.mobile.ajaxEnabled = false;
  $.mobile.pushStateEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>

[jwent]

Sorry yeah you have to add a cert. exception to your browser - FB requires SSL but I just have a self signed cert. for now. Thanks for the snippet - I fixed it using data-history="false" on the popup div itself but the init code would be handy to fix all popups. Cheers.

[jaspermdegroot]

@jwent - I am glad to hear disabling pushState fixes the issue.

Closing the issue as resolved.