Как я могу предотвратить запуск window.onbeforeunload по ссылкам javascript: href в IE?

Question

Я создаю отказоустойчивую форму для своей формы, которая будет предупреждать пользователей о том, что если они покинут страницу, их данные формы будут потеряны (аналогично тому, что делает gmail).

window.onbeforeunload = function () {    
        if (formIsDirty) {
            return "You have unsaved data on this form. Don't leave!";
        }
}

Вышеприведенная функция прекрасно работает в Firefox, но в IE она запускается любой ссылкой href, даже ссылками на javascript, а не на другие страницы.

например ....

<a href='javascript:someFunction();'>click</a>

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

Есть идеи?

Answer 1

Вы можете удалить и переназначить onbeforeunload при наведении на эти ссылки:

jQuery(
  function($)
  {
      //store onbeforeunload for later use
    $(window).data('beforeunload',window.onbeforeunload);  

      //remove||re-assign onbeforeunload on hover 
    $('a[href^="javascript:"]')
      .hover( 
             function(){window.onbeforeunload=null;},
             function(){window.onbeforeunload=$(window).data('beforeunload');}
            );

  }
);

Answer 2

Я только что столкнулся с подобной проблемой и нашел очень простое решение:

$("a").mousedown(function() {
    $(window).unbind();
});

Это удалит событие onbeforeunload как раз перед тем, как вызывается событие click.

Answer 3

Вместо этого переместите любой скрипт в обработчик событий click, с резервной страницей для пользователей без JavaScript:

<a href="foo.html" onclick="someFunction(); return false">click</a>

Ненавязчивые сторонники JS, вероятно, будут возражать против использования onclickатрибут, но дело в том, что он работает, это самый простой способ добавить обработчик событий и самый простой способ предоставить пример.Для лучшего разделения проблем вы можете вместо этого использовать либо свойство DOM0 onclick, addEventListener() / attachEvent(), либо библиотеку.

Answer 4

(Как и в некоторых других ответах, для этого необходимо изменить привязку JavaScript. Если это не сработает, не обращайте внимания.)

Я обнаружил, что в IE 7 - IE 10 простое использование jQuery .click () с preventDefault работает без отображения сообщения onbeforeunload (IE 11 не показывает сообщение beforeunload ни для одного из моих тестовых случаев) , Это верно, является ли href '#' или javascript:void(0). Я полагаю, что вывод верен, если attachEvent / addEventListener используется напрямую, но я не проверял это.

Демонстрация ниже на http://jsbin.com/tatufehe/1. Обе версии (выделены зеленым цветом) с preventDefault работают (не показывают диалог beforeunload). Тот, у кого нет preventDefault, показывает это (для сравнения).

---

$( document ).ready( function () {
  $( 'a' ).click( function ( evt ) {
    $( '#display' ).text( 'You clicked: ' + $( this ).text() );

    if ( $(this).hasClass( 'withPreventDefault' ) ) {
      evt.preventDefault();
    }
  } );
})

window.onbeforeunload = function () {
  return "Are you sure you want to leave?";   
};

---

<p id="display"></p>

<p><a class="withPreventDefault" href="#">Number sign link *with* preventDefault</a></p>

<p><a class="withPreventDefault" href="javascript:void(0);">JavaScript href link *with* preventDefault</a></p>

<p><a href="javascript:void(0);">JavaScript href link *without* preventDefault</a></p>

Answer 5

Если вы добавите символ закладки в href тега a, вы сможете использовать событие onclick для включения вашего JavaScript.

<a href="#" onclick='someFunction();'>click</a>

Я провел несколько тестов, и похоже, что JavaScript выполняется без вызова события onbeforeunload. Мне было бы интересно узнать, работает ли это для других или у вас все еще остается та же проблема после реализации тегов таким способом.

Answer 6

Если пользовательская мышь находится на ссылке и запускает обновление страницы с помощью клавиатуры или активирует ссылку с помощью клавиатуры, приглашение не будет отображаться. Таким образом, подход Dr.Molle не будет работать в этом редком случае.