Make a link with data-rel="back" use the href if there is no history

[marcuskrahl]

There seems to be a navigation issue in Internet Explorer for Windows Phone 8 (tested on a HTC Windows Phone 8S).

You can reproduce this issue with the following steps:

1. Go to http://jsbin.com/uroran/4/
2. Go to the second page
3. Either of the buttons should take you back to the first page
4. Go back to the second page
5. Close the browser and open it again

Expected result:
Either of the buttons on page 2 can take you back to page 1

Actual result:
Only the third button (using $.mobile.navigate) can take you back to page 1.

The reason for this seems to be that IE wipes the history on closing. That's why also the hardware back button does not work anymore.

If your navigation relies on going back in the navigation history (like mine does) you may get stuck on a page (if the only option to leave a page is via a data-rel="back" button).

[jaspermdegroot]

@mk747gx

When using data-rel="back" on a link you should always specify a `href`` as a fallback. Otherwise there is no way the framework could know where that link should bring you when there is no history stack. However, it seems like doing so still doesn't resolve the problem. See http://jsbin.com/uroran/5/edit

@johnbender - Can we make sure the `href`` is used when history is empty?

@agcolom - Do you know if the "Back button links" info from this page http://view.jquerymobile.com/old-docs/docs/pages/page-links.html ended up in the new API docs?

[agcolom]

@uGoMobi I think that didn't make it to the API docs. Under which category do you think this should go? The exisiting categories are:

Events
Methods
Miscellaneous
Reference
Widgets

[jaspermdegroot]

@agcolom - I am not really sure. Maybe we need a new category for entries about scripting and linking pages, multi vs. single pages, AJAX navigation, etc..

[jaspermdegroot]

Changed the title because it's not a WP/IE specific issue. Original title: "data-rel="back" not working in IE for Windows Phone 8 after closing the browser"

[tomoyuki28jp]

Is this a right way to quick fix?

$(document).bind('pageinit', function() {
    $(this).find('a[data-rel="back"]').click(function(event) {
        event.stopPropagation();
        if ($.mobile.urlHistory.stack.length == 1) {
            $.mobile.changePage($(this).attr('href'));
        } else {
            $.mobile.back()
        }
        return false
    })
})

[lichunqiang]

@tomoyuki28jp
nice solution,

[christhorsvik]

In case anyone is interested, here is my current solution:

$(document).on('pagecontainershow', function(e) {
  if(window.history.length == 1 || $.mobile.navigate.history.activeIndex == 0) {
    $(".ui-page-active").find('.ui-header a[data-rel="back"]').one('click touchend', function(event) {
      event.stopPropagation();
      $(':mobile-pagecontainer').pagecontainer('change', $(this).attr('href'), {
        changeHash:false,
        reverse:true
      });
      window.history.replaceState(undefined, undefined, $(this).attr('href'));
      return false;
    });
  }
});

While I only targeted Chrome with the window.history.length, $.mobile.navigate.histor.activeIndex captures site entrances that aren't the first history item. I used the pagecontainershow event to stop the .find() from finding links on different pages in my multipage layout. I only want to find buttons in my header in order to not interfere with buttons that close popups. I replaced the current history state with the new page after transitioning. I hope this helps someone.