JavaScript onbeforeunload Event

The onbeforeunload Event happens just before a document is unloaded. It displays a statement in a confirmation dialogue box to stay current page or go to the next page using the provided link. You may ask the user whether they wish to stay on the current page with the help of the onbeforeunload Event.

In other words, Any link that will take you to a new page, such as a text link, an image link, or another type of link, triggers the onbeforeunload Event. If users click on ok of the confirmation box, go to the next page and click on cancel, then keep on the same page. It is impossible to delete the dialogue box's message.

Syntax

The onbeforeunload Event uses multiple tags and functions.

The onbeforeunload property In HTML:

The onbeforeunload property In JavaScript:

The onbeforeunload property In JavaScript, using the addEventListener() method:

Explanation

When you are going to leave a webpage that has a beforeunload event listener, the beforeunload Event will cause a confirmation box to appear asking you if you are sure you want to leave.

If you proceed, the browser directs you to the new page. Otherwise, the navigation is stopped.

As per the specification, the confirmation dialogue must be displayed by invoking the preventDefault() method within the beforeunload event handler.

The onbeforeunload property In JavaScript without windows:

addEventListener('beforeunload',(event) => {
  event.preventDefault();
});

Explanation

In the past, several browsers let you show a unique message on the confirmation dialogue. The users were supposed to be warned that their data would be lost if they navigated away. Unfortunately, user fraud is the common usage for this capability. A custom response is no longer accepted as a result.

According to the Javascript specification, the beforeunload event handler ignores the methods to confirm(), alert(), and prompt() functions.

Examples

The following examples use the onbeforeunload property for the link.

Example 1

The onbeforeunload property uses the windows and gets the confirmation box. Here, we use basic Events with HTML tags.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> The JavaScript onbeforeunload Event </title>
</head>
<body onbeforeunload="return myEvents()">
<h2> The JavaScript onbeforeunload Event </h2>
<p> Use the HTML and Javascript to work with an "onbeforeunload" event to the window object. </p>
<p> press F5 or click on the given link to activate the onbeforeunload Event and Close this window. </p>
<a href = "https://www.javatpoint.com/"> Click this link to go to javatpoint.com </a>
<script>
window.addEventListener("beforeunload", function(event) {
  event.returnValue = "Write something to get data here..";
});
function myEvents() {
  return "Write something to get data here...";
}
</script>
</body>
</html>

Output

The below image shows the onbeforeunload Event with the confirmed values.

Output1

First time click on the link

Output2

Second time click on the link

Example 2

The onbeforeunload property uses the windows and gets the confirmation box. Here, we use basic Events with the data.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> The JavaScript onbeforeunload Event </title>
</head>
<body>
<h2> The JavaScript window.onbeforeunload Event </h2>
<p> Use the HTML and Javascript to work with an "onbeforeunload" event with the window. onbeforeunload object. </p>
<p> press F5 or click on the given link to activate the onbeforeunload Event and Close this window. </p>
<a href = "https://www.javatpoint.com/">Click this link to go to javatpoint.com</a>
<script>
window.onbeforeunload = function(event) {
  event.returnValue = "Write something to get data here..";
};
</script>
</body>
</html>

Output

The below image shows the onbeforeunload Event with the confirmed values.

Example 3

The onbeforeunload property uses the windows and gets the confirmation box. Here, we use basic eveni inside of the windows.addEventListener property with the function to get the link.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> The JavaScript onbeforeunload Event </title>
</head>
<body>
<h2> The JavaScript onbeforeunload Function </h2>
<p> Use the HTML and Javascript to work with an "onbeforeunload" event to the window object. </p>
<p> press F5 or click on the given link to activate the onbeforeunload Event and Close this window. </p>
<a href = "https://www.javatpoint.com/"> Click this link to go to javatpoint.com </a>
<script>
window.addEventListener("beforeunload", function(event) {
event.returnValue = "Write something to get data here..";
});
</script>
</body>
</html>

Output

The below image shows the onbeforeunload Event with the confirmed values.

Example 4

The onbeforeunload property uses without windows and gets the confirmation box. Here, we use a basic Event inside the addEventListener property for the web page.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> The JavaScript onbeforeunload Event </title>
</head>
<body>
<h2> The JavaScript onbeforeunload Event using the addEventListener </h2>
<p> press F5 or click on the given link to activate the onbeforeunload Event and Close this window. </p>
<a href = "https://www.javatpoint.com/"> Click this link to go to javatpoint.com </a>
<script>
addEventListener("beforeunload", function(event) {
  event.returnValue = "Write something to get data here..";
});
</script>
</body>
</html>

Output

The below image shows the onbeforeunload Event without windows.

Example 5

The onbeforeunload property uses without the windows and gets the confirmation box. Here, we use Event for the web page with the data.

<!DOCTYPE html>
<html>
<body>
<h2> The JavaScript onbeforeunload function without windows </h2>
<p> press F5 or click on the given link to activate the onbeforeunload Event and Close this window. </p>
<a href = "https://www.javatpoint.com/"> Click this link to go to javatpoint.com </a>
<script>
onbeforeunload = function(event) {
  event.returnValue = "Write something to get data here..";
};
</script>
</body>
</html>

Output

The below image shows the onbeforeunload Event without windows.

Web Browsers Supported

The following browsers and its version supported the onbeforeunload Event.

Google Chrome 1
Edge version 12
Firefox 1
Safari version 3
Opera version 12

Conclusion

The javascript onbeforeunload Event works for the load link or page with the confirmation. It loads a web page or windows with the event object. It helps before loading the web page and getting the proper next page.

Next TopicRead Data from JavaScript IndexedDB

← prev next →