Prohibit browser back or warn when reloading or closing tabs

2022年6月15日

When you are creating a form or something similar, there are times when you don’t want the user to browser back, reload, or do anything else.

The reason for this is that before the data you enter is saved, it will be lost by browser back or reloading.

In this article, I will show you how to use react to warn you when you browser back, reload, or close a tab.

Disallow browser back

Here is a sample javascript code to prohibit browser back.

history.pushState(null, null, location.href);
window.addEventListener('popstate', (e) => {
　　alert('Don't use browser back.');
　　history.go(1);
});

Use the addEventListener() method to detect the browser back.
The event type is popstate.

Clicking the back button of the browser will change the URL to the URL of the previous page.
At this time, popstate will execute.

Therefore, we need to use history.go(1) to advance the page one level to the original URL.

If you want to incorporate this code into your react, you can do so in componentDidMount().

class Example extends React.Component {
  ...

  componentDidMount() {
    // Disallow browser back
    history.pushState(null, null, location.href);
    window.addEventListener('popstate', (e) => {
      alert('Don't use browser back.');
      history.go(1);
    });
  }

  ...
}

If you are using react hooks, write a code in useEffect to prohibit the browser back.

const example = () => {
  ...
  useEffect(() => {
    // Disallow browser back
    history.pushState(null, null, location.href);
    window.addEventListener('popstate', (e) => {
      alert('Don't use browser back.');
      history.go(1);
    });
  })
  ...
}

Warn when reloading, closing tabs

Here is a javascript sample code that warns you to reload the browser and close the tab.

// Setting up an event
window.addEventListener('beforeunload', this.onUnload);

// Unsetting an event
window.removeEventListener('beforeunload', this.onUnload);

onUnload(e) {
  e.preventDefault();
  e.returnValue = '';
}

Use the beforeunload event of the addEventListener() method to detect the reload and close tab events.

When the reload and close tab events are detected, display a warning modal with e.preventDefault().
Then, assign a string to the property of the modal dialog with e.returnValue.

The following is a sample code that incorporates a warning when the browser is reloaded or tabs are closed into react.

class Example extends React.Component {
  ...

  componentDidMount() {
    // Setting up an event
    window.addEventListener('beforeunload', this.onUnload);
  }

  componentWillUnmount() {
    // Unsetting an event
    window.removeEventListener('beforeunload', this.onUnload);
  }

  onUnload(e) {
    e.preventDefault();
    e.returnValue = '';
  }

  ...
}

If you are using react hooks, write a code in useEffect to prohibit the browser back.

const example = () => {
  ...
  useEffect(() => {
    // Setting up an event
    window.addEventListener('beforeunload', onUnload);

　　return () => {
      // Unsetting an event
      window.removeEventListener('beforeunload', onUnload);
    }
  })

  const onUnload = (e) => {
    e.preventDefault();
    e.returnValue = '';
  }
  ...
}