Question

我会开始研究一下，但是没有任何解决方案可以解决看起来应该是简单的JQM修改。

我有一个葡萄酒评论webapp，它具有以下视图用户流程： http://5buckchuck.com/

葡萄酒类型＆gt;酒单＆gt;葡萄酒详情＆gt;葡萄酒评论（通过django backto重定向）＆gt;葡萄酒详细信息从评论更新

我想要发生的是当用户按下后退按钮时，它应该返回到酒单。目前发生的是重新加载Wine Detail视图。需要三次回压才能回到酒单。： - （

我解决这个问题的想法是两个：

如果历史堆栈中的最后一项是Wine Review，则拼接历史堆栈中的最后3项。我很难尝试内省最后一个历史对象来获取pageURL。我觉得这个解决方案有点太脆弱了。
```
var last_hist = $.mobile.urlHistory.getActive();
last_hist.data.pageURL;
```

第二个想法是覆盖后退按钮行为，以便Wine Detail视图中的后退按钮始终返回Wine列表视图

$('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);
   }
 });

没有骰子，有些东西会中断交易...

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 = winelist 。

我只使用#internal页面进行此操作，但使用winelist.html等设置它并不困难。

有关详细信息，请查看JQM docs

中的事件页面

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应用程序以使用Pop Up＆＃34; windows＆＃34;对于我历史上不想要的那些页面。这最终变得更容易和更清晰，而不是浏览浏览器历史记录。

现在用户可以直观地使用浏览器后退按钮，而且我不必编写应用程序后退按钮。

您唯一需要确保的是弹出窗口不会自己进入浏览器历史记录，因此请务必设置＆＃34;历史记录＆＃34;选项为false，如下所示：

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

Answer 4

好的，所以解决方案接近我发布的更新。以前的解决方案的问题是，有很多东西绑定到“后退”按钮。虽然我的新绑定操作有时可能有效，但其他操作也会发生，我尝试了unbind()但仍然没有用。

我的解决方案有点烟雾和镜子。我检查上一页是否是评论页面然后如果是这样，我将旧的后退按钮替换为我的新虚假按钮，其历史记录返回步骤如下：

$('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

之前我在使用jquery mobile时遇到过类似的问题，并在文档中解决了这个问题。在“在页面开头”设置Javascript时，请使用pageinit而不是准备好或者在您的案例页面显示中。我认为这将解决您的问题，而无需解决历史队列。

如何修改jQuery移动历史记录Back Button行为

5 个答案: