Как предупредить пользователя при нажатии кнопки браузера назад - PullRequest
Новая
       10

Как предупредить пользователя при нажатии кнопки браузера назад

0 голосов
/ 02 апреля 2020

Я хотел бы предупредить пользователя, когда он нажимает на кнопку «Назад» в браузере, а затем перенаправляет его после подтверждения. Ниже приведен мой код JS, но он работает только в firefox, я хотел бы, чтобы он работал и в chrome, и в других браузерах.

Примечание. Для того чтобы событие было запущено в chrome, мне нужно сначала нажать на тело страницы, затем нажать кнопку «назад» браузера (это не хорошо).

Пожалуйста, помогите. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page2</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
  <script>
    $(function(){
      window.history.pushState({page: 1}, "", "");
      window.onpopstate = function(event) {
        if(event){
          var confirm = window.confirm("Please, note that you may lose your move details by returning to the previous page.");
        }
      }
    });
  </script>
</body>
</html>

Ответы [ 6 ]

8 голосов
/ 16 апреля 2020

Я нашел полезную ссылку, которая объясняет такое поведение Chrome и других браузеров.

"Chrome планирует спасти вас от сайтов, которые путаются с вашей кнопкой возврата"

На некоторых сайтах, упомянутых в посте выше, использует это поведение в свою пользу. Таким образом, кажется, что браузеры типа Chrome намеренно предотвращают подобные хитрые хаки с помощью кнопки "назад" (очевидно, из-за соображений безопасности и беспрепятственного взаимодействия с пользователем ). Кроме того, я сомневаюсь, что если кто-нибудь найдет симпатичный взлом, то Chrome разработчики снова будут развивать свои проверки безопасности , как сказано в посте.

В любом случае, у нас все еще есть Firefox с нами . Удачи;)

1 голос
/ 19 апреля 2020

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

window.onbeforeunload = (event) => {
event.preventDefault();
event.returnValue = '';
}
0 голосов
/ 22 апреля 2020

Отсюда: Как показать "Вы уверены, что хотите отойти от этой страницы?" когда зафиксированные изменения? 

window.onbeforeunload = function() {
    return true;
};

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

Я почти уверен, что это закрывает вас может go. Потому что было бы очень плохо, если бы кто-то мог просто отключить кнопку «Назад» для пользователей.

0 голосов
/ 21 апреля 2020

это работает для меня. 

 window.onbeforeunload = function (e) {
                var message = "Are you sure ?";
                var firefox = /Firefox[\/\s](\d+)/.test(navigator.userAgent);
                if (firefox) {
                    //Add custom dialog
                    //Firefox does not accept window.showModalDialog(), window.alert(), window.confirm(), and window.prompt() furthermore
                    var dialog = document.createElement("div");
                    document.body.appendChild(dialog);
                    dialog.id = "dialog";
                    dialog.style.visibility = "hidden";
                    dialog.innerHTML = message;
                    var left = document.body.clientWidth / 2 - dialog.clientWidth / 2;
                    dialog.style.left = left + "px";
                    dialog.style.visibility = "visible";
                    var shadow = document.createElement("div");
                    document.body.appendChild(shadow);
                    shadow.id = "shadow";
                    //tip with setTimeout
                    setTimeout(function () {
                        document.body.removeChild(document.getElementById("dialog"));
                        document.body.removeChild(document.getElementById("shadow"));
                    }, 0);
                }
                return message;
            };
0 голосов
/ 20 апреля 2020

Вам необходимо реализовать свои собственные логики c для обработки назад и вперед, для справки вы можете обратиться к следующему сообщению stackoverflow.

Как обнаружить событие кнопки возврата браузера - Кросс-браузер

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

0 голосов
/ 20 апреля 2020

Я нашел решение на странице справки Google Chrome. Попробуйте добавить history.back()

<script>
    $(function(){
      window.history.pushState({page: 1}, "", "");
      history.back();
      history.forward();
      window.onpopstate = function(event) {
        if(event){
          var confirm = window.confirm("Please, note that you may lose your move details by returning to the previous page.");
        }
      }
    });
</script>

Кажется, проблема с Chrome заключается в том, что он не вызывает событие onpopstate, если не выполнит действие браузера (вызов history.back() ). После добавления только того, что заставляет работать в Chrome, другие браузеры останавливаются. Добавление history.forward() исправляет это и начинает работать в любом браузере.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...