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

Question

Я работаю над веб-CMS. Когда пользователь нажимает на ссылку для перехода на другую страницу или отправляет форму, я хочу, чтобы анимированный GIF «подожди», чтобы отобразиться в верхнем правом углу, чтобы символизировать, что загрузка выполняется.

Однако пользователь может отменить загрузку новой страницы в своем браузере, например, нажав кнопку «Отмена» или ESC. В этом случае они останутся на текущей странице, так как браузер перестанет загружать следующую страницу.

Как я могу обнаружить это в Javascript и скрыть значок «wait» еще раз?

Edit: Для решения «вы не должны делать, что, браузер уже имеет его» комментарии. У меня есть две конкретные причины для введения пользовательского решения.

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

• При медленных соединениях с большим запаздыванием индикатор хода некоторых браузеров будет двигаться очень медленно. Я работаю в реальной жизни, когда требуется время, пока throbber не проявит активность в IE6/7. Это создает впечатление, что ничего не происходит, и приложение реагирует очень медленно, и это меня раздражает. Мне нужен индикатор, который постоянно перемещается (например, Safari).

Answer 1

Извините, я не думаю, что есть какой-либо способ сделать это, нет. Я имею в виду, что вы можете обнаружить нажатие клавиши для того, что стоит, но нет общего способа обнаружить отмену загрузки следующей страницы. Помимо того, что вы просто догадываетесь, что если вы все еще находились вокруг нескольких секунд после отправки/клика, то либо он был отменен, либо медленный сервер. Или сделайте всю навигацию и материал для отправки с помощью AJAX на той же странице, что позволит избежать проблемы, просто нарушив собственную кнопку остановки браузера; вероятно, не очень хорошая идея.

(я не это действительно отличная идея, чтобы добавить ожидания Throbber свой собственный, хотя в любом случае, браузер имеет вполне хороший один из своих собственных!)

Answer 2

Это не будет работать для кнопок отправки. Как только пользователь нажимает кнопку «отправить», запрос отправляется на сервер. Как только это произойдет, действие было выполнено. Лучшее, что вы могли бы сделать в этом случае, - это остановить пользователя от ответа их действия, однако действие все равно будет выполнено.

Кроме того, единственный способ остановить переход пользователя на другую страницу после запуска другого запроса - это перенаправить пользователя обратно на страницу, из которой они пришли. В целом, отмена запроса - это просто плохая идея Bad Idea ™

Для форм другим вариантом будет использование AJAX для всех представлений форм. Запросы AJAX могут быть отменены, поэтому вы можете использовать это в своих интересах, хотя это затрудняет и усложняет работу.

Если вы все еще хотите, чтобы пройти через это, зная последствия, хотя, вы можете легко сделать это with a JavaScript framework как jQuery, YUI, Dojo, MooTools, ExtJS или Closure.

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

$().ready(function() { 
    function showLoading(){ 
     $loadingOverlay = $('<div id="loadingOverlay"></div>'); 
     $loadingAnimation = $('<div id="loadingAnimation">Loading...</div>'); 
     $("body").prepend($loadingAnimation).prepend($loadingOverlay); 
    } 

    $("a[href]").click(showLoading); 
    $("form").submit(showLoading); 
}); 

Чтобы добавить анимированный GIF в окне загрузки, заменить текст «Загрузка ...» с <img /> тег, указывающий на погрузочной GIF вашего выбора.Живая демонстрация этого можно увидеть здесь: http://jsbin.com/opadi

Вы будете нуждаться в этом CSS, чтобы пойти с выше код:

#loadingOverlay { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%; 
    z-index: 1000; 
    background: #000; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5;  
    opacity: 0.5; 
} 
#loadingAnimation { 
    position: absolute; 
    top: 30%; 
    left: 50%; 
    z-index: 1001; 
} 

Answer 3

Я думаю, вы должны проверить так называемый «Якорь Navigation». Там хороший учебник здесь:

http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/

В принципе, вы будете ссылаться пользователя на тот же URL, но с якоря в конце (http://localhost/home#somepage?param1=val1) и загружать данные с помощью AJAX. Javascript поймает изменение привязки и может показать значок «загрузка» и предоставить дополнительные материалы, такие как «отменить загрузку». В этом случае у вас будет история вашего браузера, поэтому вы можете сказать «назад» в браузере или history.go (-1) в javascript.

Answer 4

(Да, я как старые темы)

Я столкнулся с такой же ситуацией здесь. Я создаю несколько страниц, где навигация осуществляется посредством отправки формы, и я считаю удобным показать пользователю, что что-то происходит, прежде чем он выйдет, и трижды запускает тот же запрос в 15 раз - «Мы не доверяем пользователям, делаем мы?"

Поэтому я использую JQuery вместе с хорошим плагин гривой экспромт, в наличии http://trentrichardson.com/Impromptu/index.php

Вот кусок кода:

$(document).ready(function() { 

$("form").submit(function() { 
    $.prompt("<center>Sending request...</center>", { 
    overlayspeed: 200, 
    buttons:{} 
    }); 

    setTimeout("jQuery.prompt.close()", 2000); 
}); 

}); 

Answer 5

Я не считаю, что можно проверить, является ли пользователь нажал кнопку STOP в кросс-браузере, но, перейдя в корень проблемы, вы можете сами контролировать запросы:

Когда вы запускаете свои запросы xhr, зарегистрируйте функцию с помощью onreadystatechange. Проверьте, есть ли xhr.readyState === XMLHttpRequest.DONE. Проверьте свой индикатор относительно того, удалось ли выполнить запрос (ручная волна, редактирование приветствуется). Если это не удастся, то оно каким-то образом прервано, и вы должны вернуть индикатор прогресса.

Если это распространенный сценарий, вы можете автоматизировать это путем исправления обезьян. См. this question.

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

Надеюсь, что это поможет!