Question

当用户单击浏览器的“后退按钮”，然后在确认后将其重定向时，我想警告该用户。下面是我的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>

Answer 1

我找到了一个有用的链接，该链接解释了Chrome和其他浏览器的这种行为。

"Chrome plans to save you from sites that mess with your back button"

上述帖子中提到的某些令人讨厌的站点，使用，对此表示赞成。因此，似乎Chrome之类的浏览器会通过“后退按钮” 有意阻止这类偷偷摸摸的黑客行为（显然是出于安全原因和流畅的用户体验）。而且，我怀疑是否有人发现了一个不错的黑客，然后Chrome开发人员会再次发展他们的安全检查，如该帖子所述。

无论如何，我们仍然有Firefox 。祝你好运；）

Answer 2

就像您说的那样，您首先需要单击主体以激活确认对话框，然后每当用户尝试离开页面时，都会显示确认对话框。

window.onbeforeunload = (event) => {
event.preventDefault();
event.returnValue = '';
}

Answer 3

我在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()可以解决该问题，并开始在每种浏览器上正常工作。

Answer 4

您需要实现自己的逻辑来处理后退和前进，有关参考，您可以参考以下stackoverflow帖子的答案。

How to Detect Browser Back Button event - Cross Browser

希望有帮助。

Answer 5

这对我有用。

 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;
            };

Answer 6

从这里：How to show the "Are you sure you want to navigate away from this page?" when changes committed?

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

这将询问用户是否要在离开页面时离开页面。

我很确定那是您可以关闭的时间。因为如果任何人都只能为用户禁用后退按钮，那将是非常糟糕的。

单击浏览器后退按钮时如何警告用户

6 个答案: