History.back does not work on iOS using Cordova

Question

I have a hybrid application developed with Cordova. The application is very simple, so I did not use the framework. Almost all pages are entered through Ajax using the jQuery ajax() method, and then added to the story using the HTML5 history API using the pushState() method.

So that the user can return to the previously visited page (page in the history), I created a button. I listen to the backbutton event, as well as clicking on this button, and when the event fires, I execute the following handler:

 onBackButton: function() { window.history.length === 0 ? navigator.app.exitApp() : window.history.back(); } 

To ensure maximum compatibility, I also added history.js to the project.

It works like a charm on Android and on the iOS simulator on Mac, but it doesn’t work on a real device. What happens is that iOS catches the event, but the execution of the method does not change the page. I already tried several methods based on previous answers on StackOverflow, but no luck. Here are some examples: history.back () does not work in buildgos ios build and Phonegap - navigator.app.backHistory () not working on the HTML back button .

What can i try?

Answer 1

Did you see this answer a few months ago? IOS seems to have some security issues when it comes to navigating the story through a script. The answer here also includes working with URL hashing: fooobar.com/questions/697412 / ...

Answer 2

You can just use

 history.go(-1); 

to go back.

Answer 3

Try it.

main.js

 var pagesHistory = []; var currentPage = {}; var path = ""; 

page1.js

 currentPage = {}; currentPage.back = function() { pagesHistory.pop(); }; currentPage.loadPage2 = function() { pagesHistory.push(path + "pages/Page2.html"); }; 

page2.js

 currentPage = {}; currentPage.back = function() { pagesHistory.pop(); }; currentPage.loadPage1 = function() { pagesHistory.push(path + "pages/Page1.html"); }; 

Link: http://public.dhe.ibm.com/software/mobile-solutions/worklight/docs/v620/BuildingMultiPageApplicationProject.zip

Answer 4

I do not know if the cordova itself has a navigator. But I usually used this function to return:

 function goBack() { //or history.back() history.go(-1); navigator.app.backHistory(); } 

Failed to verify it.

Edit: Since you are not doing a full upgrade and downloading almost everything via ajax, you may have to implement the story back. The iphone has problems with javascript-only pages on return. Since you are pushing your actions to a story, this should not be difficult:

 window.addEventListener("popstate", function(e) { //get it from the history, execute your functions to show the page as usual }); 

Answer 5

What about app.application.navigate("#:back") ?

Answer 6

I do not use Cordoba, but this code can help you:

 String . prototype . isEmpty = function () { return this . length === 0; }; var browserHistory; function hash ( name, historyChange ) { "use strict"; if ( name !== undefined ) { if ( hash () !== name ) { if ( ! historyChange ) { browserHistory . add ( name ); } window . location . hash = name; } } else { var newHash = window . location . hash . split ( "#" ) [ 1 ]; return newHash === undefined ? "" : newHash; } } browserHistory = { currentIndex : 0, history : [], add : function ( name ) { "use strict"; this . currentIndex = this . currentIndex + 1; if ( this . history . length - 1 > this . currentIndex ) { this . history . splice ( this . currentIndex ); } this . history . push ( name ); }, backward : function () { "use strict"; if ( this . currentIndex === 0 ) { return; } this . currentIndex = this . currentIndex - 1; this . changeHash (); }, changeHash : function () { "use strict"; hash ( this . history [ this . currentIndex ], true ); }, forward : function () { "use strict"; if ( this . currentIndex === this . history . length - 1 ) { return; } this . currentIndex = this . currentIndex + 1; this . changeHash (); }, init : function ( name ) { "use strict"; this . history . push ( name ); } }; window . onhashchange = function () { "use strict"; if ( hash () . isEmpty () ) { load ( { name: "" } ); } else { load ( { name: hash () } ); } }; window . onload = function () { "use strict"; if ( ! hash () . isEmpty () ) { browserHistory . init ( hash () ); load ( { name: hash () } ); } else { browserHistory . init ( "" ); } }; 

This script:
1) Work with sites that use hashes (http (s): // (www.) Name.domain / # urlHash).

 Examle: https://www.example.com/page - default url https://www.example.com/page#login - login subpage https://www.example.com/page#images - images subpage etc. 

2) the function "window. Onload" checks if the entered url contains a hash and init browserHistory with it or with the help of "" (empty line) - no hash - this is my main page
3) Object "browserHistory" saves page history
4) The "hash" function, called without arguments, returns the current hash of the URL and, with the "name" url hash parameter changed
5) When the hash changes, the "window. Onhashchange" function is called 6) "Hond" the "window. Onhashchange" function If the url does not contain a hash, the script load the default page.
If the URL contains a hash, the script loads the hash-based subpage.
7) In the "load" function (not described here), I have an XMLHttpRequest that calls the php file with the name argument and sets the main div element that was returned from this php file to the html code.
8) Instead (for example):

 <a class="a_nice_style" href="https://www.example.com/images.html>Images gallery</a> 

You can use (for example):

 <p class="a_nice_style" onclick="hash ( 'images' );">Images gallery</p> 

9) A function named: "load" has an object as a parameter. This object is sent to the php file (as an array of "$ _GET" or "$ _POST"), so you can call the "load" function with a custom object that contains, for example, the values ​​of the input fields. 10) "browserHistory" has only the hashes of your page.

This will be your onclick button:

 onBackButton: function() { browserHistory . backward (); } 

You can change the function "browserHistory. Backward" to exit the application by replacing: "return;" in this line:

 if ( this . currentIndex === 0 ) { return; } 

with the exit code of your application.