Вопрос по jquery, jquery-mobile – Как очистить или изменить историю навигации Jquery Mobile?

22

У меня есть приложение PhoneGap, использующее jQuery Mobile. На определенной странице я не могу позволить пользователю вернуться к последней странице, которую он посетил.

Порядок страниц такой:

(1)index -> (2)listing items -> (3)form submited -> (4)sucess page

Что мне нужно Я хочу очистить всю историю, когда пользователь находится наpage 4 и установитьpage 1 как последний и единственный посетитель, если пользователь попытается вернуться назад. Может быть, это не совсем возможно, тогда я приму любое предложение.

Я представляю, что jQuery Mobile хранит историю навигации в каком-то массиве, и я надеюсь, что кто-то может помочь найти это. Заранее спасибо

РЕДАКТИРОВАТЬ Я использую многостраничный шаблон, которая представляет собой отдельную html-страницу, где некоторые элементы div работают как страницы, управляемые jQuery Mobile.

Ваш Ответ

4   ответа
31

у вас есть два «горшка» истории, в которые нужно вмешаться. Браузер и JQM.

JQM urlHistory
Вы можете очень легко изменить JQMs urlHistory. Из кода JQM:

urlHistory = {
    // Array of pages that are visited during a single page load.
    // Each has a url and optional transition, title, and pageUrl
    // (which represents the file path, in cases where URL is obscured, such as dialogs)
    stack: [],
    // maintain an index number for the active page in the stack
    activeIndex: 0,
    // get active
    getActive: function () {
        return urlHistory.stack[urlHistory.activeIndex];
    },
    getPrev: function () {
        return urlHistory.stack[urlHistory.activeIndex - 1];
    },
    getNext: function () {
        return urlHistory.stack[urlHistory.activeIndex + 1];
    },
    // addNew is used whenever a new page is added
    addNew: function (url, transition, title, pageUrl, role) {
        // if there's forward history, wipe it
        if (urlHistory.getNext()) {
            urlHistory.clearForward();
        }
        urlHistory.stack.push({
            url: url,
            transition: transition,
            title: title,
            pageUrl: pageUrl,
            role: role
        });
        urlHistory.activeIndex = urlHistory.stack.length - 1;
    },
    //wipe urls ahead of active index
    clearForward: function () {
        urlHistory.stack = urlHistory.stack.slice(0, urlHistory.activeIndex + 1);
    }
};

Так что все вышеперечисленные функции доступны и могут быть вызваны, например, так:

$.mobile.urlHistory.clearForward();

Чтобы следить за своей историей, поместите ее куда-нибудь и прослушайте pageChange (после выполнения переходов), чтобы увидеть, что находится внутри urlHistory:

$(document).on('pagechange', 'div:jqmData(role="page")', function(){
    console.log($.mobile.urlHistory.stack);
});

Оттуда вы можете начать видеть, что должно быть в истории, и почистить его, как вам нужно.

Я часто использую это для своего собственного слоя навигации, чтобы изменить то, что хранится в urlHistory, а что не должно храниться. Синхронизация с браузером - сложная часть ...

При синхронизации с браузером:
В моем слое навигации я удаляю только двойные записи из urlHistory, поэтому всегда есть страница, на которую можно перейти (а не две), когда вы нажимаете кнопку браузера назад. В вашем случае у вас будет 4 записи в истории браузера, но если вы удалите 2 записи из JQM urlHistory, у вас будет две страницы "не надо" когда нажата кнопка «назад». Так что, если история вашего браузера выглядит так:

www.google.com
www.somePage.com
www.YOUR_APP.com = page1
    page2
    page3
    page4

И твое удалениестраница а также Page3, нажатие кнопки возврата должно привести к:

1st back-click = page4 > page1
2nd back-click = page1 > www.somePage.com [because you removed page3]
3rd back-click = www.somePage.com > www.google.com [because you removed page2]

Теоретический обходной путь:

держать счетчик, как "глубоко" вы заходите на страницу удалите страницы из JQM urlHistory и получите значение «переход» = counter-removePages при следующем щелчке браузера снова перейдите к x window.history (назад) и пропустите только один переход JQM. Ваш URL раскрутит page4> page3> page2> page1 за один шаг, и вы позволите JQM только один раз перейти от page4 к page1 проверьте, что находится в urlHistory, и почистите после «тройного возвращения»

Осторожно, это не оптимальное решение и вы должны учесть много вещей (пользователь нажимает куда-то еще, прежде чем вернуться и т. д.). Я всегда пытался заставить что-то подобное работать в более сложной установке и в итоге просто перестал его использовать, потому что он никогда не работал так, как должен. Но для более простой настройки это может очень хорошо сработать.

Пусть тебя благословят старые и новые боги! Marcelo Assis
В JSF, например, я использовал этот подход, чтобы переопределить jQuery Mobile'sdata-rel="back" нажатие кнопки:window.history.go(-#{managedBean.count});, который превратился бы вwindow.history.go(-3); если вы находитесь на странице 4, например. falsarella
Я не нахожу $ .mobile.urlHistory в документах jqm ... Api.jquerymobile.com /? S = urlHistory dsdsdsdsd
Нет ничего, с чем нельзя связываться. JacobRossDev
Это больше не работает для jQuery Mobile> = 1.4. Смотрите ответ мамы. MikeGM
14

1,4 Rc1 здесь нетurlHistory, но вы можете читать из объекта навигации.

пример

$.mobile.navigate.history.stack[0];
// Object {hash: "", url: "http://localhost:61659/"}

$.mobile.navigate.history.stack[1];
// Object {url: "http://localhost:61659/Search/Filter", hash: "#/Search/Filter", title: "Search Result", transition: "pop", pageUrl: "/Search/Filter"…}

и вы можете использовать эту служебную функцию, чтобы увидеть, что происходит:

$(document).on('pagechange',function() {
    console.log("Current:" + $.mobile.navigate.history.getActive().url);
    console.log("Stack: (active index = " + $.mobile.navigate.history.activeIndex + " -previous index: " + $.mobile.navigate.history.previousIndex + " )");
    $.each($.mobile.navigate.history.stack, function (index, val) {
        console.log(index + "-" + val.url);
    });
});

смотрите такжеВо

Устаревшее текущее поведение извлечения строк запроса из хешей. Начиная с версии 1.5, мы будем следовать спецификациям хэшей и предоставим хук для обработки пользовательской навигации.

3

поэтому в браузере невозможно предотвратить возврат пользователя. Тем не менее, поскольку у вас есть приложение для телефонной связи, вы можете напрямую обрабатывать кнопку возврата. Этот вопрос должен помочь вам: Переопределение поведения Android-кнопки работает только на первой странице с PhoneGap

Я использую многостраничный шаблон, используя только один HTML-файл. Я не думаю, что он использует историю браузера, а похожую на ajax историю браузера с самоуправлением. Marcelo Assis
Да, он использует history.pushState / изменяет хэш в браузерах, которые не поддерживают pushState. Это все еще создает записи в истории браузера, которые вы не можете удалить (невозможно из javascript) - см. Developer.mozilla.org / EN / DOM / Manipulating_the_browser_history . OlliM
Возможно отключить эту функцию из jQM, но это будет означать, что вы потеряете большую часть функциональности, которую вам придется реализовать самостоятельно. Переключатель ajaxEnabled: Jquerymobile.com / тест / документы / API / globalconfig.html OlliM
2

поэтому его следует воспринимать как таковой. Вы можете удалить элементы из urlHistory.stack просто с помощью

delete $.mobile.urlHistory.stack[index_of_your_choosing];

Если вы хотите убедиться, что правильная страница удалена, вы можете сделать что-то подобное.

var stack_count = $.mobile.urlHistory.stack.length;

for(x=0; x<stack_count; x++){

  $.mobile.urlHistory.stack[x];

  if(typeof $.mobile.urlHistory.stack[x] !== 'undefined'){

    if($.mobile.urlHistory.stack[x].url != 'http://url-to-exclude.com/'){

       delete $.mobile.urlHistory.stack[x];

    }}
}
Не хочешь объяснить отрицательный голос? JacobRossDev

Похожие вопросы