回顾历史时，我总是想转到首页 [英] I want to always go to first page when going back in history

问题描述

我已经使用HTML5和amp;构建了一个移动应用程序； jQuery mobile，每次按下后退按钮时，我只需要返回首页即可.

I have built a mobile application using HTML5 & jquery mobile, I just need to go back to first page each time the back button is pressed.

假设我有以下页面:

• 主要
• 产品
• 搜索
• 搜索结果
• 关于

让我说:

主要->搜索->搜索结果->产品，然后转到关于"页面.

Main --> Search --> Search Result --> Product, then I went to About page.

返回时，历史记录为(如果我在关于"页面上):

When going back, the history would be (if I'm on About page):

关于->产品->搜索结果->搜索->主页

About --> Product --> Search Result --> Search --> Main

我需要的是每次我按返回页面时直接返回主页，而不浏览历史记录.

What I need is to go back directly to Main page each time I press back page and not to go through the history.

我试图在最后几对中搜索它，但是没有运气，这使我无法完成我的应用程序.

I tried to search for this in the last couple without any luck, and it is stopping me from finalizing my app.

我想了几天才找到答案，我来到了这段代码:

I was trying for days to search for answer I came to this code:

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    $(window).on('popstate', function() {
      var hashLocation = location.hash;
      var hashSplit = hashLocation.split("#!/");
      var hashName = hashSplit[1];

      if (hashName !== '') {
        var hash = window.location.hash;
        if (hash === '') {
            window.location = 'index.html#mainScreen';
        }
      }
    });

  }

});

但仍然没有运气

我也得到了这段代码:

$(window).on("navigate", function (event, data) {
  var direction = data.state.direction;
  if (direction == 'back') {
    window.location = 'index.html#mainScreen';
  }
});

如果方向返回，它将返回到主屏幕页面，但是它显示了返回主页面之前的最后一页.

It is going back to the mainScreen page if the direction is back, but it showing the last page before going back to the main page.

推荐答案

对于任何与导航相关的问题，请始终依靠pagecontainerbforechange事件.这是在更改页面之前触发的事件.是一次事件中的popstate，hashchange和navigate.

For any navigation-related issues, always lean on pagecontainerbforechange event. It is an event that fires before changing pages; it is a popstate, hashchange and navigate all in one event.

此事件在每次页面更改时触发两次，第一次是将toPage作为 string 返回，第二次作为 object .要更改toPage值，它应该是 string ，因此您需要在首次触发时进行更改.

This event fires twice on each page change, first time it returns toPage as a string, and second time as an object. To alter toPage value, it should be a string, so you need to do changes on first time it fires.

此外，它还会返回options对象，该对象可以告诉您options.direction的导航方向，无论是forward还是back.

Also, it returns options object which can tell you the direction of navigation options.direction, whether forward or back.

$(document).on("pagecontainerbeforechange", function (e, data) {
    if (typeof data.toPage == "string" && data.options.direction == "back" && data.prevPage[0].id == "aboutPage") {
        data.toPage = "#mainScreen"; /* redirect to main page */
        data.options.transition = "flip"; /* optional */
    }
});

在上面的代码中，您需要确保:

In the code above, you need to make sure that:

1. toPage是字符串
2. options.direction是back
3. prevPage是您要在单击 back 按钮时从其重定向用户的页面

1. toPage is a string
2. options.direction is back
3. prevPage is the page you want to redirect user from when back button is hit

演示

Demo

这篇关于回顾历史时，我总是想转到首页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！