Answer by vinh_

vinh_ — Tue, 10 Mar 2020 12:15:26 -0400

I worked for this issue recently. I could share the idea. We will use "load" and "popstate" event to detect and handle the back button in general and show a custom dialog, you will have full control of the dialog, then you can disable the back button completely.

Refer the load event documentation from Mozilla: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

Idea get from an answer on StackOverflow: https://stackoverflow.com/questions/18141729/browsers-back-button-click-with-confirm-box

JavaScript

var exitPageConfirmDialog = {
  confirmation: undefined,
  enabled: true,
  enable: function() { this.enabled = true; },
  disable: function() { this.enabled = false; },
  show: function() { $('#exitPageConfirmDialog').show(); },
  hide: function() { $('#exitPageConfirmDialog').hide(); },
  showCustomConfirmDialog: function() {
    // creates new history entry with same URL for the first popstate could work
    history.pushState(null, null, null);
    window.addEventListener('popstate', function() {
      if (exitPageConfirmDialog.enabled === true) {
        exitPageConfirmDialog.confirmation = $.Deferred();
        exitPageConfirmDialog.confirmation.promise()
            .then(function resolve() {
              exitPageConfirmDialog.disable();
              history.back();
            }, function reject() {
              exitPageConfirmDialog.enable();
              history.pushState(null, null, null);
            });
        exitPageConfirmDialog.show();
      }
    });
  },
  init: function() {
    $(document).ready(function() {
      // Display custom confirm dialog, when user click on back button.
      window.removeEventListener('load', exitPageConfirmDialog.showCustomConfirmDialog);
      window.addEventListener('load', exitPageConfirmDialog.showCustomConfirmDialog);
    });
  }
};

HTML

<div id="exitPageConfirmDialog" style="display: none; background-color: grey;">
  <p>Do you want to go back?</p>
  <p><button onclick="exitPageConfirmDialog.hide(); exitPageConfirmDialog.confirmation.resolve();">YES</button></p>
  <p><button onclick="exitPageConfirmDialog.hide(); exitPageConfirmDialog.confirmation.reject();">NO</button></p>
</div>
< script>
  exitPageConfirmDialog.init();
< /script>

You should add onclick in YES/NO button, this editor prevent me adding those attribute:

YES-onclick: exitPageConfirmDialog.hide(); exitPageConfirmDialog.confirmation.resolve();

NO-onclick: exitPageConfirmDialog.hide(); exitPageConfirmDialog.confirmation.reject();

Testing

create 2 pages, the second page will have this script, and an input to interact with (some browser like Chrome will not execute event unless you interact with some field inside the page).
open the first page, then click on a link to navigate to the second page.
type some thing in the input field
click on Back button, you will see the confirm message and YES/NO button (you should use style="display: none" on the dialog, I could not put it in this answer because of the editor).
When click YES, you will go back. When click NO, you will stay. If you remove the YES button, you will always keep user stay on the page.

In case you want temporary disable the dialog, use

exitPageConfirmDialog.disable();

Enable again

exitPageConfirmDialog.enable();

Known issue

Confirm dialog does not show if you are not interact with the page.

Answer by Reguel Wermelinger

Reguel Wermelinger — Wed, 04 Mar 2020 10:41:01 -0500

The hack provided here works like a charm on Chromium: https://support.google.com/chrome/thread/8721521?msgid=10849294

tested with: Chromium Version 80.0.3987.87 (Official Build) Built on Ubuntu and Axon.ivy 8.0 LTS

<script type = "text/javascript" > history.pushState(null, null, location.href); history.back(); history.forward(); window.onpopstate = function () { history.go(1); }; </script>