javascript - jQuery 手机 : Clear page when back-btn is pressed

Question

我正在开发一个混合应用程序，它有很多“sequentail”页面(例如:主页 -> 第 1 页 -> 第 2 页 -> 第 3 页)。所有这些页面都在标题中设置了 data-add-back-btn= true 并且它们通过 AJAX 加载数据。问题是，当我按下后退按钮时，我想清除页面的内容，因为当我再次进入该页面时，它将显示以前的数据，直到加载新数据。我试过:

$('#page_one').on('pagebeforechange', function(){
    //clear
    //reload ajax
}

但是当页面被调用时它工作正常，当我从 page_two 返回该页面时也是如此。我想在 Android 中使用类似 onDestroy() 的东西。存在吗？

非常感谢。

Answer 1

你需要利用两个事件

1. navigate 确定用户是使用 jQM 后退按钮 data-rel="back" 还是浏览器的后退导航 back按钮。

   var direction = "";
   
   $(window).on("navigate", function (e, data) {
      direction = data.state.direction == "back" ? true : false;
   });
   

2. pagebeforechange (jQM <= 1.3) pagecontainerbeforechange (jQM >= 1.4)。无论是否使用后退按钮，此事件都将返回您正在导航的页面的对象 .toPage。在他的阶段，你可以替换toPage的内容。

   $(document).on("pagecontainerbeforechange", function (e, data) {
       if (direction && $.type(data.toPage) == "object") {
           /* do your magic here */
           $(".ui-content", data.toPage).append("<p>Back button was hit</p>");
           /* don't forget to reset direction var */
           direction = false;
       }
   });
   

Demo