How to remove current page from Jquery Mobile history? - jquery-mobile

Question

Is there a way to remove the current page (page being navigated away from) from the Jquery Mobile history? Setting changeHash:false seems to remove the incoming page from the history.
Here is an example:
Page 1
<div data-role="page">
<div data-id="fixedheader" data-role="header" data-position="fixed">
<h1>Page 1</h1>
</div>
<div data-role="content">
<button onclick="$.mobile.changePage('page2.html',{changeHash:false});">Page 2</button>
</div>
</div>
Page 2
<div data-role="page">
<div data-id="fixedheader" data-role="header" data-position="fixed">
<h1>Page 2</h1>
</div>
<div data-role="content">
<button onclick="$.mobile.changePage('page3.html',{changeHash:true});">Page 3</button>
</div>
</div>
Page 3
<div data-role="page">
<div data-id="fixedheader" data-role="header" data-position="fixed" data-add-back-btn="true">
<h1>Page 3</h1>
</div>
<div data-role="content"></div>
</div>
What I want is that when on Page 3, clicking the back button goes to Page 2 and that it is not possible to go back to Page 1.
What happens is that clicking from Page 1 to Page 2 to Page 3, on Page 3 the back button goes directly back to Page 1.
Also if I put data-add-back-btn="true" on Page 2, it shows a back button but clicking it does nothing.

Answer 1

Assuming you are using jQuery Mobile > 1.4, you can directly access and modify the history stack with $.mobile.navigate.history.stack
If you only want to remove Page 1 from the history when you navigate from Page 1 -> Page 2, the following code should solve your issue. This function assumes jQuery Mobile 1.4.3
$(document).on('pagecontainerchange', function(e, ui) {
if ( ui.prevPage.attr('id') === 'first' && ui.toPage.attr('id') === 'second' ) {
var index = $.mobile.navigate.history.stack.length - 2;
$.mobile.navigate.history.stack.splice(index, 1);
}
});
Here is a fiddle which logs the state of the history stack