Управление кнопкой Назад с помощью onhashchange или jquery

Question

Мне нужно несколько советов о том, как получить элементарный контроль при использовании кнопки «назад».

По сути, я должен предупредить пользователя, что, нажав кнопку «Назад», когда они на моей странице checkout.asp, они потеряют уже имеющиеся элементы. Мне нужно дать им указание использовать вместо этого кнопки навигации.

Я осмотрел упомянутое упоминание о событии onhashchange, но не смог заставить его работать.

Я также попробовал плагин от Ben Alman:

<script type="text/javascript" src="jquery/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery.ba-hashchange.js"></script>

<script language="JavaScript" type="text/JavaScript">
$(function(){
    // Bind the event.
    $(window).hashchange( function(){
    // Alerts every time the hash changes!
    alert( location.hash );
    })
    // Trigger the event (useful on page load).
    $(window).hashchange();
});
</script>

Это только вызывает предупреждение (без значения из location.hash) при входе на страницу, но я просто хочу предупредить пользователя, если он уходит. Если они решат остаться, дайте им нажать «Отмена», чтобы оставить их на той же странице.

Любая помощь приветствуется.

Answer 1

Чтобы отображать предупреждение только при использовании кнопки «Назад», мы должны исключить предупреждающее сообщение при нажатии на действительный источник.

var showWarning = true;

window.onbeforeunload = function() {
  if (showWarning) {
    return confirm("you have unsaved data. ok to exit?");
  }
}

function clearWarning() {
  showWarning = false;
} 

Теперь просто убедитесь, что вызываете clearWarning ()Функция, когда разрешена кнопка нажата.Что-то вроде этого должно работать:

referenceToElement.addEventListener('onClick', clearWarning(), false);

Я не проверял это, но я бы предположил, что что-то вроде этого - то, что вам нужно.

Answer 2

Использование:

window.onbeforeunload = function() {
   return confirm("you have unsaved data. ok to exit?")
})