Определить, нажал ли пользователь кнопку "назад" - Мобильные браузеры

Question

У меня очень странное требование.

Требование гласит: На странице сведений о товаре, когда изображение товара открывается в лайтбоксе, затем при нажатии back кнопка в браузере на мобильном телефоне, должна отображаться страница с описанием товара, а не предыдущая страница, т.е.

Итак, я подумал о поиске, как обрабатывать кнопку назад в кросс-браузерах. Некоторые решения работали в настольных браузерах, но ни одно не работало в Mobile Browsers

Я попробовал ниже решение:

window.onload = function () {
if (typeof history.pushState === "function") {
    history.pushState("jibberish", null, null);
    window.onpopstate = function () {
        history.pushState('newjibberish', null, null);
        // Handle the back (or forward) buttons here
        // Will NOT handle refresh, use onbeforeunload for this.
    };
}
else {
    var ignoreHashChange = true;
    window.onhashchange = function () {
        if (!ignoreHashChange) {
            ignoreHashChange = true;
            window.location.hash = Math.random();
            // Detect and redirect change here
            // Works in older FF and IE9
            // * it does mess with your hash symbol (anchor?) pound sign
            // delimiter on the end of the URL
        }
        else {
            ignoreHashChange = false;
        }
    };
  }
};

Также попробовал это:

 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 === '') {
      alert('Back button was pressed.');
    }
  }
});

Пробовал это тоже

window.onbeforeunload = function (e) {
        var e = e || window.event;
        var msg = ""
        $("#blueimp-gallery").hide();
        // For IE and Firefox
        if (e) {
            e.returnValue = msg;
        }

        // For Safari / chrome
        return msg;
     };

Answer 1

Как вы, без сомнения, узнали, onbeforeunload предоставляет способ просто отменить событие навигации (см. этот ответ, чтобы начать с него), но это не всегда работает так, как вы хотите, во всех браузерах (многие просто показывают всплывающее окно подтверждения независимо от того, что вы делаете, для безопасности причины). Сначала сделайте это, если вы еще этого не сделали; Я не вижу никаких попыток отмены в вашем текущем примере кода, только манипулирование историей.

В противном случае использование маршрутизации хеша может помочь с этим - предпочтительно через библиотеку, которая управляет хешем URL как уникальными маршрутами просмотра (запеченными в Angular, React и т. Д.) И вносит изменения в history для тебя. Предоставление модальному состоянию уникального URL-адреса (что, по моему опыту, было бы невозможно) означает, что возвращение "назад" просто закроет модальный режим вместо перезагрузки страницы.