如何禁用 Safari 上的后退按钮并显示警报？答案

【问题标题】：how to disable back button on safari and show alert?如何禁用 Safari 上的后退按钮并显示警报？
【发布时间】：2023-04-07 13:59:01
【问题描述】：

我正在尝试应老板客户的要求禁用后退按钮

我知道禁用它不是一个好主意，但是我的老板坚持认为（他不懂编程）

我用 jquery 和 java 脚本成功地做到了

$(document).ready(function() {
    history.pushState(null, null, null);
    history.back();
    history.forward();
    count = 0
});

$(function() {
   
    $(window).on("popstate", function(event) {
        history.go(1);
        count++
        if (count > 2) {
            alert("use back button on the screen");
            count = 1;
        }
    });
});

问题是警报没有出现在 safari 上（这是所有 iphone 用户都使用的），根据我在 stackoverflow 中的研究，这是因为 safari 后向缓存，是否有解决方法？

ps：你需要先点击网页的某处，然后再按返回键

【问题讨论】：

欢迎来到 Stack Overflow！这里有一个类似的问题，您可能会觉得有帮助。 stackoverflow.com/questions/12381563/…

标签： javascript jquery safari back-button back-button-control

【解决方案1】：

我将其更改为模态，至少会显示弹出窗口

    $(document).ready(function () {
  history.pushState(null, null, null);
  history.back();
  history.forward();
  count = 0
  if(browserName == "Safari"){
    count = 1;
}
});

var popupTemplate =
  '<div id ="myModal" class="modal fade">' +
  '  <div class="modal-dialog">' +
  '    <div class="modal-content">' +
  '      <div class="modal-header">' +
  '        <button type="button" class="close" data-dismiss="modal">&times;</button>' +
  '      </div>' +
  '      <div class="modal-body"> use back button on the screen。</div>' +
  '    </div>' +
  '  </div>' +
  '</div>';

$(function () {
  
  $(window).on("popstate", function (event) {
    history.go(1);
    count++;
    if (count > 2 && !($('#myModal').is(':visible'))) {
      $('#myModal').remove();
      $(popupTemplate).modal()
      count = 1;
    }
  });
});

【讨论】：