Предотвратите любую форму обновления страницы, используя jQuery/Javascript
Когда пользователь находится на моей странице, я не хочу, чтобы он обновлял страницу.
В любое время пользователь нажимает F5 или кнопку обновления сверху. Он должен получить предупреждение, сказав
Вы не можете обновить страницу.
Также, если пользователь открывает новую вкладку и пытается получить доступ к тому же URL в предыдущей вкладке, он должен получить предупреждение
Вы не можете открыть одну и ту же страницу в 2 вкладках
В любом случае я могу сделать это с помощью JavaScript или JQuery? Первый пункт действительно важен.
9 ответов
#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, и описанная выше ситуация происходит постоянно. Мне обычно приходится ждать окончания сеанса на стороне сервера, прежде чем я смогу снова использовать банковскую систему.
Вы не можете помешать обновлению пользователя, и при этом вы не должны стараться. Вы должны вернуться к тому, почему вам нужно это решение, в чем здесь корень проблемы? Начните там и найдите другой способ решения проблемы. Возможно, вы уточнили, почему вы думаете, что вам нужно это сделать, это поможет найти такое решение.
Нарушение фундаментальных функций браузера никогда не является хорошей идеей, более 99,9999999999% Интернета работает и обновляется с помощью F5, это ожидание пользователя, которое вам не следует нарушать.
В прежние времена CGI у нас было много форм, которые вызывали различные внутренние действия. Например, текстовые уведомления для групп, задания на печать, обработка данных и т. Д.
Если пользователь находился на странице, которая говорила: "Пожалуйста, подождите... Выполнение ОГРОМНОЙ работы, которая может занять некоторое время". Скорее всего, они ударить REFRESH, и это будет плохо!
ЗАЧЕМ? Потому что это вызовет более медленную работу и в конечном итоге погубит все это.
Решение? Позвольте им сделать их форму. Когда они отправят свою форму... Начните свою работу, а затем направьте их на другую страницу, которая говорит им ждать.
Где страница посередине содержала данные формы, необходимые для начала работы. Страница WAIT, однако, содержит уничтожение истории JavaScript. Таким образом, они могут ЗАГРУЗИТЬ эту страницу ожидания сколько захотят, и она никогда не будет запускать исходное задание в фоновом режиме, поскольку эта страница WAIT содержит только данные формы, необходимые для самого WAIT.
Надеюсь, что это имеет смысл.
Функция уничтожения истории также не позволяла им нажимать НАЗАД и затем обновлять.
Это было очень плавно и прекрасно работало в течение МНОГИХ лет, пока некоммерческая организация не была ликвидирована.
Пример: ЗАЯВКА НА ФОРМУ - соберите всю их информацию, и когда она будет отправлена, это вызовет вашу работу с бэкэндом.
RESPONSE from entry формы - возвращает HTML, который выполняет перенаправление на вашу страницу статического ожидания и / или POST/GET на другую форму (страница WAIT).
WAIT PAGE - содержит только данные FORM, относящиеся к странице ожидания, а также javascript для уничтожения самой последней истории. Подобно (-1 ИЛИ -2) уничтожить только самые последние страницы, но все же позволяет им вернуться на исходную страницу ввода ФОРМЫ.
Как только они окажутся на вашей странице WAIT, они могут нажимать REFRESH столько раз, сколько захотят, и это никогда не вызовет первоначальное задание FORM на сервере. Вместо этого ваша страница WAIT должна включать само обновление по времени META, чтобы она всегда могла проверить состояние своей работы. Когда их работа завершена, они перенаправляются со страницы ожидания туда, куда вы пожелаете.
Если они делают ОБНОВЛЕНИЕ... они просто добавляют еще одну проверку своего статуса работы там.
Надеюсь, это поможет. Удачи.
Хотя это не очень хорошая идея, чтобы отключить клавишу 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>
Надеюсь, это поможет!
Нет, нет
Я почти уверен, что нет способа перехватить нажатие на кнопку обновления в JS, и даже если это произошло, JS можно отключить.
Вы, вероятно, должны отступить от своего X (предотвращая обновление) и найти другое решение для Y (что бы это ни было).
Проблема № 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);
Число (2) возможно при использовании реализации сокета (например, websocket, socket.io и т. Д.) С настраиваемым тактовым импульсом для каждого сеанса, в котором участвует пользователь. Если пользователь пытается открыть другое окно, у вас есть проверка обработчика javascript с сервером, если все в порядке, а затем ответьте сообщениями об ошибках.
Тем не менее, лучшим решением является синхронизация двух сеансов, если это возможно, как в документах Google.
Согласно MDN, лучший способ сделать это — использоватьpagehide
событие, которое не является на 100% надежным, но более надежным, чем событие, которое, по-видимому, наиболее широко рекомендуется для решения этой проблемы.
Однако, в отличие от
unload
иbeforeunload
событий, это событие совместимо с обратным/прямым кешем (), поэтому добавление прослушивателя к этому событию не помешает включению страницы вbfcache
... Если вы специально пытаетесь обнаружить события выгрузки страницы, событие pagehide — лучший вариант.
var url = window.location.pathname.toLowerCase();
if (url.includes("manufacturers/ford")) {
window.addEventListener(
"pagehide",
(event) => {
if (event.persisted) {
// The page is about to close
// Show a confirmation modal, return or similar
}
},
false
);
}
Это не рекомендуется, но если вы хотите полностью запретить пользователю обновлять страницу любым возможным способом, вы можете использовать:
Это не только предотвратит обновление, но и предотвратит навигацию.