Предотвратите любую форму обновления страницы, используя jQuery / Javascript

Question

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

1. В любое время пользователь нажимает F5 или кнопку обновления сверху. Он должен получить предупреждение, сказав

   Вы не можете обновить страницу.

2. Также, если пользователь открывает новую вкладку и пытается получить доступ к тому же URL-адресу в предыдущей вкладке, он должен получить предупреждение

   Невозможно открыть одну и ту же страницу на 2 вкладках

В любом случае, я могу сделать это, используя JavaScript или jQuery? Пункт первый действительно важен.

Answer 1

# 1 может быть реализовано через window.onbeforeunload.

Например:

<script type="text/javascript">
    window.onbeforeunload = function() {
        return "Dude, are you sure you want to leave? Think of the kittens!";
    }
</script>

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

# 2 более или менее невозможно.Даже если вы отслеживали сеансы и логины пользователей, вы все равно не смогли бы гарантировать, что вы правильно обнаружили вторую вкладку.Например, может быть, у меня есть одно открытое окно, а затем закройте его.Теперь я открываю новое окно.Вы, вероятно, обнаружите это как вторую вкладку, хотя я уже закрыл первую.Теперь ваш пользователь не может получить доступ к первому окну, потому что он закрыл его, и он не может получить доступ ко второму окну, потому что вы им отказываете.

На самом деле, онлайн-система моего банка очень старается сделать №2, и описанная выше ситуация происходит постоянно.Мне обычно приходится ждать окончания сеанса на стороне сервера, прежде чем я смогу снова использовать банковскую систему.

Answer 2

Вы не можете помешать обновлению пользователя, и вы не должны стараться. Вы должны вернуться к , почему вам нужно это решение, в чем здесь корень проблемы? Начните там и найдите другой способ решения проблемы. Возможно, вы уточнили, почему, по вашему мнению, вам нужно это сделать, это поможет найти такое решение.

Нарушение фундаментальных функций браузера никогда не является хорошей идеей, более 99,9999999999% Интернета работает и обновляется с помощью F5, это ожидание пользователя, которое не следует нарушать.

Answer 3

В прежние времена CGI у нас было много форм, которые вызывали различные внутренние действия.Например, текстовые уведомления для групп, задания на печать, обработка данных и т. Д.

Если пользователь находился на странице, на которой было написано «Пожалуйста, подождите ... Выполнение ОГРОМНОЙ работы, которая может занять некоторое время».У них больше шансов попасть в REFRESH, и это будет ПЛОХО!

ЗАЧЕМ?Потому что это вызовет более медленные рабочие места и в конечном итоге погубит все это.

Решение?Позвольте им сделать их форму.Когда они отправляют свою форму ... Запустите свою работу, а затем направьте их на другую страницу, которая попросит их подождать.

Где страница посередине фактически содержала данные формы, которые были необходимы для начала работы.Страница WAIT, однако, содержит уничтожение истории JavaScript.Таким образом, они могут ЗАГРУЗИТЬ эту страницу ожидания сколько захотят, и она никогда не будет запускать исходное задание в фоновом режиме, поскольку эта страница WAIT содержит только данные формы, необходимые для самого WAIT.

Надеюсь, что это имеет смысл.

Функция уничтожения истории также препятствовала тому, чтобы они нажимали НАЗАД и затем обновлялись.

Это было очень гладко и прекрасно работало МНОГИЕ МНОГО лет, пока некоммерческая организация была ликвидирована.

Пример: ЗАПИСЬ В ФОРМУ - собирать всю их информацию, и при отправке это вызывает задание вашего бэкэнда.

ОТВЕТ из записи формы - возвращает HTML, который выполняет перенаправление на страницу статического ожидания и / или POST / GETв другую форму (страница ожидания).

WAIT PAGE - содержит только данные FORM, относящиеся к странице ожидания, а также javascript для уничтожения самой последней истории.Подобно (-1 ИЛИ -2), чтобы уничтожить только самые последние страницы, но при этом они могут вернуться к своей исходной странице ввода FORM.

Как только они окажутся на вашей странице WAIT, они могут нажать столько же, сколько и REFRESH.как они хотят, и это никогда не будет порождать оригинальную работу FORM на серверной части.Вместо этого ваша страница WAIT должна включать само обновление по времени META, чтобы она всегда могла проверить состояние своей работы.Когда их работа завершена, они перенаправляются со страницы ожидания туда, куда вы пожелаете.

Если они обновляют вручную ... Они просто добавляют еще одну проверку статуса своей работы там.

Надеюсь, это поможет.Удачи.

Answer 4

Хотя отключать клавишу F5 не очень хорошая идея, вы можете сделать это в JQuery, как показано ниже.

<script type="text/javascript">
function disableF5(e) { if ((e.which || e.keyCode) == 116 || (e.which || e.keyCode) == 82) e.preventDefault(); };

$(document).ready(function(){
     $(document).on("keydown", disableF5);
});
</script>

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

Answer 5

Нет, нет.

Я почти уверен, что нет способа перехватить нажатие на кнопку обновления в JS, и даже если это произошло, JS можно отключить.

Вы, вероятно, должны отойти от своего X (предотвращая обновление) и найти другое решение для Y (что бы это ни было).

Answer 6

Число (2) возможно при использовании реализации сокета (например, websocket, socket.io и т. Д.) С пользовательским пульсом для каждого сеанса, в котором участвует пользователь. Если пользователь пытается открыть другое окно, у вас Обработчик javascript проверит у сервера, все ли в порядке, а затем ответит сообщениями об ошибках.

Тем не менее, лучшим решением является синхронизация двух сеансов, если это возможно, как в документации Google.

Answer 7

Проблема №2 теперь может быть решена с помощью BroadcastAPI .

На данный момент он доступен только в Chrome, Firefox и Opera.

var bc = new BroadcastChannel('test_channel');

bc.onmessage = function (ev) { 
    if(ev.data && ev.data.url===window.location.href){
       alert('You cannot open the same page in 2 tabs');
    }
}

bc.postMessage(window.location.href);