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

【问题标题】：How to warn the user when click on the browser back button单击浏览器后退按钮时如何警告用户
【发布时间】：2020-04-22 14:23:45
【问题描述】：

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

【问题讨论】：

在没有先前交互的情况下试图弄乱默认浏览器控件被认为是糟糕的用户体验。除了 Rahul 的回复，我认为最好阅读 this post 和 MDN page for beforeunload 描述该行为：“为了对抗不需要的弹出窗口，浏览器可能不会显示在 beforeunload 事件处理程序中创建的提示，除非页面已被交互有，甚至可能根本不显示它们。”
如果您想警告用户他们将丢失所做的更改，他们是否必须首先进行更改？（除非您以编程方式进行更改）
也许this 会有所帮助？在网页中自动执行点击事件。

标签： javascript jquery google-chrome safari cross-browser

【解决方案1】：

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

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

上面帖子中提到的一些令人讨厌的网站，使用这种行为，对他们有利。因此，Chrome 之类的浏览器似乎有意防止这种带有“后退按钮”的偷偷摸摸的黑客攻击（显然是由于安全原因和流畅的用户体验）。此外，我怀疑是否有人发现了一个漂亮的 hack，然后 Chrome 开发人员将再次改进他们的安全检查，如帖子中所述。

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

【讨论】：

太棒了！拉胡尔，我认为了解这一点对我来说非常重要。

【解决方案2】：

就像你说的，你首先需要点击正文来激活确认对话框，然后每当用户尝试离开页面时，都会显示确认对话框。

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

【讨论】：

嗨 Satish，您尝试取消的事件实际上是“不可取消的”。您可以使用.cancelable 属性进行检查。
developer.mozilla.org/en-US/docs/Web/API/Event/cancelable。您可以在这里查看，因为它是说 beforeunload 是人们想要取消的事件之一。
对不起，我试图在 codepen 中检查您的代码。首先，我尝试了您的same code，发现甚至没有调用该事件。然后，我把它替换为onpopstate，它被调用了，但它是不可取消的。所以，我错误地评论了这一点。就是这样。

【解决方案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() 修复它并开始在每个浏览器上运行。

【讨论】：

如果用户使用隐身标签怎么办？在这种情况下可能的方法是什么？

【解决方案4】：

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

How to Detect Browser Back Button event - Cross Browser

希望对你有帮助。

【讨论】：

你自己试过了吗？由于选择答案的领先 cmets 说它不再有效，因为 Chrome 更新！

【解决方案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;
            };

【讨论】：

【解决方案6】：

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

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

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

我很确定这就是你可以去的关门。因为如果任何人都可以为用户禁用后退按钮，那将是非常糟糕的。

【讨论】：