Home>

When the browser's back or forward button is pressed on the target screen,
I want to display an Alert.

I can confirm the operation (Alert display) in iOS Chrome and desktop modern browser,
On iOS Safari, Alert is not displayed, although the page is not moved.

Source code
$(function () {
    'use strict';
    history.pushState (null, null, null);
    // Display alert when history movement is detected
    window.addEventListener ('popstate', function () {
      alert ('Back or forward buttons are not available');
    });
  });
Tried

For confirmation, I tried processing (background color change) different from alert as follows
The background color was reflected on iOS Safari without any problems. But Alert is not displayed.

$(function () {
    'use strict';
    history.pushState (null, null, null);
    // Display alert when history movement is detected
    window.addEventListener ('popstate', function () {
      alert ('Back or forward buttons are not available');
      // Check if the process passes → Check the background color change
      $('body'). css ('backgroundColor', '# 000');
    });
  });
Applicable browsers

iOS 11.3.1 Safari

  • Answer # 1

    The cause has not been elucidated, but we supported it by displaying a modal instead ofalert ().

    // Abbreviation
      // Display alert when history movement is detected
      window.addEventListener ('popstate', function () {
        // Modal processing
      });
      // Abbreviated

    Because it was displayed on iOS Safari without any problem, this will be resolved.
    Thank you all for the survey.