jquery mobile multi html go back to first page

问题

I'm initializing my application with the code below:

$(document).on("mobileinit", function() {
  $.extend($.mobile, {
    hashListeningEnabled: true,
    pushStateEnabled: true
  });

  $.mobile.autoInitializePage = false;

  var userApplicationContext = loadPreference("userApplicationContext");

  $(function() {
    $("body").load(userApplicationContext == null ? "app_options.html [data-role=page]" : "home.html [data-role=page]", function(data) {
  $.mobile.initializePage();
    });
  });
});

So there are different apps to use my application:

1. app_options.html > home.html
2. app_options > more_options.html > home.html
3. home.html

when we get in home.html userApplicationContext is not null anymore.

I want to get back to home.html no matter what path you have followed from the current page (and ideally remove the middle pages from history).

Because I load a different page on mobileinit I tried to make this code to achieve this behaviour, with no success.

$( document ).on( "pagecontainerbeforechange", function ( ev, data ){
  var toPage = data.toPage ? data.toPage : "",
  prevPage = data.prevPage ? data.prevPage : "",
  options = data.options,
  absUrl = data.absUrl ? $.mobile.path.parseUrl(data.absUrl).filename : "";

  var previousId = prevPage != "" && typeof prevPage !== "string" ? prevPage.attr('id') : null;
  var toId = toPage != "" && typeof toPage !== "string" ? toPage.attr('id') : toPage;

  if ( typeof toPage == "string" && data.options.direction == 'back') {
    if (toId != 'page-home' && (previousId == 'p1' || previousId == 'p2' || previousId == 'p3' || previousId == 'p4')) {
    data.toPage = $.mobile.firstPage.attr('id') == 'page-app-options' ? "home.html" : "#page-home";

       $.extend( data.options, {
            transition: "flip",
       }); 
    }
  }
});

Can you help me out?

来源：https://stackoverflow.com/questions/33168187/jquery-mobile-multi-html-go-back-to-first-page