如何修改jQuery Mobile的历史后退按钮行为(How to modify jQuery mo

与我研究了一下，我会开始这一关，但解决不了什么解决办法似乎应该是一个简单的JQM修改。

我有以下看法用户流酒评web应用： http://5buckchuck.com/

葡萄酒种类>葡萄酒列表>葡萄酒详情>酒评（Django的通过重定向科莉）>从审核更新红酒详情

当用户按下后退按钮，它应该回到酒单我希望发生的。目前是什么情况是葡萄酒详细信息视图重新加载。它需要按回三次回到酒单。 :-(

我的想法来解决这个有两个：

从历史堆栈拼接的最后3项，如果在历史堆栈中的最后一个项目是酒评。我有一个很难试图反思过去的历史记录对象来获取PAGEURL。我有一种感觉，这个解决方案是有点太脆弱，虽然。
```
 var last_hist = $.mobile.urlHistory.getActive(); last_hist.data.pageURL; 
```

第二个想法是覆盖后退按钮行为，以便从葡萄酒详细信息视图返回按钮总是回到葡萄酒列表视图

 $('div#wine_detail').live('pageshow',function(event, ui){ $("a.ui-btn-left").bind("click", function(){ location.replace("/wines/{{wine.wine_type}}/#"); }); });

有可能是一个更好的方式来做到这一点，但我有一点的想法。

更新：所以我继续在这方面与破解有点微不足道的结果。在事情我已经找到了，这是我基本需要的工作： window.history.go(-3)

从控制台它正是我需要的。

所以，我想结合它的后退按钮像这样的：

$('div#wine_detail').live('pageshow',function(event, ui){
  var last = $.mobile.urlHistory.stack.length - 1;
  var last_url = $.mobile.urlHistory.stack[last].url;
  var review_url = /review/g;
   if (last_url.match(review_url) )
     {
       $('div#wine_detail a.ui-btn-left').bind( 'click', function( ) {  
         console.log("click should be bound and going back in time...")
         window.history.go(-2);
         });
   }
   else
   {
     console.log('err nope its: ' + last_url);
   }
 });

没有骰子，东西interupts交易...

Answer 1:

我不希望拼接/流行/推与urlHistory。如何在pagebeforechange重定向像这样：

$(document).on("pagebeforechange", function (e, data) {

    var overrideToPage;

    // some for-loop to go through the urlHistory TOP>DOWN
    for (var i = $.mobile.urlHistory.activeIndex - 1; i >= 0; i--) {
        // this checks if # = your target id. You probably need to adapt this;
        if ($.mobile.urlHistory.stack[i].url = $('#yourPageId').attr('id')) {
            // save and break
            overrideToPage = $.mobile.urlHistory.stack[i].url;
            break;
        }
        // set new Page
        data.toPage = overrideToPage;
    }
});

这捕获后退按钮changePage调用并重定向到你想要的页面。你也可以只设置data.toPage =酒单直接的过程。

我只能这样做有#INTERNAL页，但它shoudn't这么难与winelist.html等设置这

欲了解更多信息，请查看活动页面的JQM 文档

Answer 2:

为什么没有在您的网页的标题部分后退按钮？事情是这样的：

<div data-role="header">
    <a data-direction="reverse" data-role="button" href="#winelist" data-icon="back">Back</a>
    <h1>Wine Detail</h1>
</div><!-- /header -->

Answer 3:

我这个搏斗最近为好。思考之后，我意识到我可以重写我的JQM应用程序使用出现“窗口”对于我不希望在我的历史的页面。这结束了比摆弄周围的浏览器历史记录更容易和更清洁的修复。

现在，用户可以直观地使用浏览器的后退按钮，我没有应用程序代码后退按钮。

你必须确保的唯一的事就是弹出窗口本身不使其进入浏览器历史记录，所以一定要在“历史”选项，像这样设置为false：

$('#some_popup').popup( { history: false } );

Answer 4:

好了，该解决方案是接近我张贴的更新。与以前的解决方案的问题是，有结合-ED的“后退”按钮很多东西。虽然我的新的绑定操作可能已有时候工作，其他的行动将发生过，我试图unbind()但仍然没有worky。

我的解决办法是有点雾里看花。我检查，看看是否在上一个页面在浏览页面，然后如果是这样，我淘汰掉旧后退键与历史后撤步，像这样我的新仿按钮：

$('div#wine_detail').live('pageshow',function(event, ui){
  var last = $.mobile.urlHistory.stack.length - 1;
  var last_url = $.mobile.urlHistory.stack[last].url;
  var review_url = /review/g;
  if (last_url.match(review_url) )
    {
      $('a.ui-btn-left').replaceWith('<a href="" id="time_machine" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Back</span><span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span></span></a>');

      $('#time_machine').bind( 'click', function( ) {  
        console.log("click should be bound and going back in time...")
        window.history.go(-3);
        });
    }
  else
    {
      console.log('err nope its: ' + last_url);
    }

它看起来完全一样的，没有人是明智的。它或许可以通过使用该方法JQM改善pagebeforeshow所以用户根本就看掉。希望这可以帮助别人。

Answer 5:

如果你有你想要的关闭按钮是指任意（不是最后一个）页面的情况下，你也可以先切换到目标页面，之后打开对话框。因此，在该对话框的关闭按钮会打开目标页面。

// First: change to the target page
$.mobile.changePage('#target_page');

随后打开这样的对话。

// Second: change to the dialog 
window.setTimeout(
   // for some reason you have to wrap it in a timeout  
   function(){
      $.mobile.changePage('#dialog');
   },
   1
);

现在，您可以打开对话框，并关闭按钮将打开#target_page。

好处：