how to disable back button on safari and show alert?

Question

i'm trying to disable back button on request of my boss customer

where i know it's not a good idea to disable it, but yeah my boss insist (he doesn't understand programming)

and i success doing it with jquery and java script

$(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;
        }
    });
});

the problem is the alert doesn't show up on safari (which is all iphone user use that), from what i research in stackoverflow it's because of safari back-forward cache, is there a work around for it?

ps: you need to click on somewhere of the webpage first before pressing back button

Answer 1

i change it to modal, at least the popup will shown

    $(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;
    }
  });
});