jQuery Mobile - back button

I am developing the app开发者_高级运维lication using jQuery Mobile 4.1.

In my app, I have two html pages like login.html and home.html. In the home.html have 3 pages. () like menupage, searchpage, resultpage.

The project flow is login.html ---> home.html. In home.html, menupage is displayed as a first page. If I choose the some option in the menupage it will move to searchpage and then resultpage. consider, currently I am in the resultpage. If I press the back button on the mobile browsers (iPhone-safari, Android-chrome) then it moves to the login.html.

But I want to display the searchPage. How to solve this one? is it possible to do this?

[Note : The pages should be in the single html page(home.html).

---

use the attribute data-rel="back" on the anchor tag instead of the hash navigation, this will take you to the previous page

Look at back linking: Here

---

Newer versions of JQuery mobile API (I guess its newer than 1.5) require adding 'back' button explicitly in header or bottom of each page.

So, try adding this in your page div tags:

data-add-back-btn="true"
data-back-btn-text="Back"

Example:

<div data-role="page" id="page2" data-add-back-btn="true" data-back-btn-text="Back">

---

try

$(document).ready(function(){
    $('mybutton').click(function(){
        parent.history.back();
        return false;
    });
});

or

$(document).ready(function(){
    $('mybutton').click(function(){
        parent.history.back();

    });
});

---

You can try this script in the header of HTML code:

<script>
   $.extend(  $.mobile , {
   ajaxEnabled: false,
   hashListeningEnabled: false
   });
</script>

---

You can use nonHistorySelectors option from jquery mobile where you do not want to track history. You can find the detailed documentation here http://jquerymobile.com/demos/1.0a4.1/#docs/api/globalconfig.html

---

This is for version 1.4.4

  <div data-role="header" >
        <h1>CHANGE HOUSE ANIMATION</h1>
        <a href="#" data-rel="back" class="ui-btn-left ui-btn ui-icon-back ui-btn-icon-notext ui-shadow ui-corner-all"  data-role="button" role="button">Back</a>
    </div>

---

try to use li can be more even

<ul>
 <li><a href="#one"  data-role="button" role="button">back</a></li>
 </ul>