Запретить любую форму обновления страницы с помощью jQuery / Javascript

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

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

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

  2. также, если пользователь открывает новую вкладку и пытается получить доступ к тому же url во вкладке prev, он должен получить предупреждение

    вы не можете открыть ту же страницу в 2 tabs

в любом случае я могу сделать это с помощью JavaScript или jQuery? Момент очень важен.

7 ответов


#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.999999999% интернета работает и обновляется с F5, это ожидание пользователя, который вы не должны ломать.


хотя это не хорошая идея отключить клавишу 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>

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


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

Если пользователь был на странице, которая говорит "Пожалуйста, подождите... Выполнение какой-то огромной работы, которая может занять некоторое время.". Они, скорее всего, попадут в REFRESH, и это будет плохо!

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

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

где страница в середине фактически содержала данные формы, необходимые для запуска задания. Однако страница ожидания содержит историю javascript destroy. Таким образом, они могут перезагрузить эту страницу ожидания все, что они хотят, и она никогда не будет запускать исходное задание, чтобы начать в фоновом режиме, поскольку эта страница ожидания содержит только данные формы, необходимые для Ждите сами.

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

функция уничтожения истории также помешала им щелкнуть назад,а затем обновить.

Он был очень бесшовным и работал отлично в течение многих лет, пока некоммерческая не была свернута.

пример: Запись формы-соберите всю их информацию, и при отправке это запускает ваше бэкэнд-задание.

RESPONSE from form entry-возвращает HTML, который выполняет перенаправление на статическое ожидание страница и/или сообщение / перейти в другую форму (страница ожидания).

страница ожидания-содержит только данные формы, связанные со страницей ожидания, а также javascript, чтобы уничтожить самую последнюю историю. Например (-1 или -2), чтобы уничтожить только самые последние страницы, но все же позволяет им вернуться к исходной странице ввода формы.

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

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

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


нет, нет.

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

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


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

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


Проблема № 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);