Javascript 如何修改jQuery移动历史后退按钮行为

我将从我已经研究过的一点开始，但是没有一个解决方案能够解决看起来应该是一个简单的JQM修改的问题

我有一个wine review webapp，它具有以下视图用户流：

葡萄酒类型>葡萄酒列表>葡萄酒详情>葡萄酒评论（通过django backto重定向）>从评论更新的葡萄酒详情

我想要发生的是，当用户按下后退按钮时，它应该返回到酒单。当前发生的情况是重新加载葡萄酒细节视图。要想回到酒单上，需要按三次后键-(

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

如果历史堆栈中的最后一个项目是Wine Review，请拼接历史堆栈中的最后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);
   }
 });

---

没有骰子，有东西打断了交易…

我不想用urlHistory拼接/pop/push。在页面上重定向怎么样

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

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

这将捕获您的后退按钮更改页面调用并重定向到您想要的页面。当然，您也可以直接设置data.toPage=winelist

我只在内部页面上做这件事，但用winelist.html等设置这件事应该不会太难

---

有关更多信息，请查看JQM中的事件页面，这样解决方案就接近我发布的更新。以前的解决方案的问题是有很多东西绑定到“后退”按钮。虽然我的新绑定操作有时可能会起作用，但其他操作也会发生，我尝试了

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);
    }

$（'div#wine_detail'）.live（'pageshow'，函数（事件，用户界面）{
var last=$.mobile.urlHistory.stack.length-1；
var last_url=$.mobile.urlHistory.stack[last].url；
var review\u url=/review/g；
如果（最后一个url.match（查看url））
{
$（'a.ui-btn-left'）。替换为（''；
$（'time_machine'）.bind（'click'，function（）{
日志（“应该绑定单击并及时返回…”）
window.history.go（-3）；
});
}
其他的
{
log（'err nope its:'+last_url）；
}

---

它看起来一模一样，没有人比它更聪明。它可能可以通过使用jQm方法

pagebeforeshow

来改进，这样用户就永远看不到交换了。希望这对其他人有所帮助。

为什么不在页面的页眉部分设置一个后退按钮呢？类似这样的内容：

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

葡萄酒细节

如果您希望关闭按钮指向任意（不是最后一个）页面，也可以先切换到目标页面，然后打开对话框。因此，对话框中的关闭按钮将打开目标页面

// 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_页面

优点：

• 解决方案适用于单个对话框，而不是从所有对话框中删除所有关闭按钮
• 单点代码上的无缝集成
• 历史操作是不需要的

---

我以前在使用jquery mobile时也遇到过类似的问题，文档中对此进行了说明。在“页面开头”设置Javascript时使用pageinit而不是ready，或者在您的案例中使用pageshow。我认为这将解决您的问题，而无需绕过历史记录队列。

我最近也在努力解决这个问题。考虑到这一点，我意识到我可以重写我的JQM应用程序，使用弹出窗口“windows”对于那些我不希望出现在历史记录中的页面，这最终是一个比在浏览器历史记录中乱搞更简单、更干净的修复方法

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

唯一需要确保的是弹出窗口本身不会进入浏览器历史记录，因此请确保将“历史记录”选项设置为false，如下所示：

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

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

---

谢谢你，我很快就会结帐！我也喜欢不要混淆历史的想法。感谢agian的回答。我注意到代码中有一些东西。if有一个比较，而不是赋值运算符。修复了这个问题。还缺少a），但如果我正确阅读了该代码，任何页面更改都不会触发该按钮，而不仅仅是后退按钮。也许这就是我需要调整的地方？使用上述代码设计解决方案的尝试很好，但应用程序本身，可能jQm不一致地使用历史API。一些标记使用内部页面#wine_blah“vs.“/wines/reds”/“因此需要编写更多的处理。我用：

$（'div#wine_detail a.ui-btn-left'）.bind（'click'，function（）{$.mobile.changePage（“/wines/whites/”，{transition:'slide}）；}）捕获了后退按钮操作）；

但我得到一个静默事件，重新加载同一页面，然后最终返回到我想要的视图，但也不一致。可能我需要在django中创建一个视图堆栈…这引入了一个名为I；）的全局变量，我在哪里可以获得有关$.mobile.urlHistory的更多信息？嗨，Marcelo，我不太清楚你的意思。

$.mobile.urlHistory