JavaScript onunload Event

When a user tries to load a page but it is unsuccessful, the page remains unloaded, and a JavaScript onunload event is triggered. The possibility exists that the onunload event will also happen if the browsers have been closed while the page is loaded.

When a user goes away from a page while selecting, submitting, clicking, and leaving the browser window, the onunload event typically enters the onunload state. Additionally, this incident happens when a user is trying to load a url orweb browser and accesses data while it is loaded.

Syntax

The onunload event uses for the html page using the javascript function. The html page and javascript function syntaxes show below.

HTML Syntax:

Add attribute and value in html container or tag.

JavaScript Syntax:

Use the html attribute name in javascript with function.

object.onunload = function(){
//javascript code.
};

This attribute has a single value script that executes when the event onunload is triggered.

Examples of onunload in JavaScript

The followingexamples show the onunload event and its output.

Example 1

The onunload JavaScript function is demonstrated in this program, where the user first uses it to call a web page for its function, then tries to close the window to see if the function has been loaded again using the script, and finally assigns an alert function using the script as indicated in the output.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Onunload Event </title>
</head>
<body onload = "trial_event()">
<h2>JavaScript Onunload Event</h2>
<script>
function trial_event() {
alert("Loading Page is Loaded Successfully");
}
</script>
</body>
</html>

Output

The following output shows unonload event information in the alert function.

Example 2

The onunload JavaScript function works in the example with the console method. The output of the onunload function's event is displayed in the console tab, and html page output is displayed on the web page.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Onunload Event </title>
</head>
<body onload = "trial_event()">
<h2>JavaScript Onunload Event</h2>
<script>
function trial_event() {
console.log("Loading Page is Loaded Successfully");
}
</script>
</body>
</html>

Output

The following output shows unonload event information in the console function.

Example 3

the output of the onunload function's event is displayed in the console tab, and html page output is displayed on a web page. We can see the onload function with the object of the id. The event works on the body tag with the console tab. It does not work on the alert function.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Onunload Event </title>
</head>
<body id ="data">
<h2> JavaScript Onunload Event </h2>
<script>
const data = document.getElementById("data");
data.onunload = function()
{
console.log("Page Loaded Successfully.");
console.log("JavaScript Onunload Event");
}
</script>
</body>
</html>

Output

The following output shows unonload event information in the console function.

Example 4

The information on the onunload function's output is displayed in the console tab but not on the html page. Here, we use the windows attribute with the function for reloading the browser. It works on the console tab but does not work on the alert function.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Onunload Event </title>
</head>
<body id = "data">
<h2> JavaScript Onunload Event </h2>
<script>
window.onunload = (event) => {
alert('The page is unloaded');
    console.log('The page is unloaded');
};
</script>
</body>
</html>

Output

The following output shows unonload event information in the alert function.

Example 5

The onunload functions used in the html attribute and displayed as an output. The function works on the console tab with function.

<!DOCTYPE html>
<html>
<head>
<title> JavaScript Onunload Event </title>
</head>
<body id = "data" onunload = "console.log('JavaScript Onunload Event. \n Page is unloaded Successfully')">
<h2> JavaScript Onunload Event </h2>
</body>
</html>

Output

The following output shows unonload event information in the alert function.

Activating the onunload Event

The following triggers are used to activate the onunload event in the javascript.

Using a link or the browser's direct navigation to move to another page.
Closing the current tab or browser window.
Updating the currently open page.
Modifying the location object from JavaScript to change the URL of the page that is presently loaded.
Calling for the window-to-navigate technique.
Using the document or window.open
To open a document in the same window, use the open technique.

Web Browsers Supported

The list of supported browsers for the onunload event property is as follows:

Google Chrome
Edge version 12
Internet Explorer
Firefox 1
Safari version 3
Opera version 4

Conclusion

The onunload event triggers the page and displays information when the page remains unloaded. It helps to refresh and reload the web page or browsers.

Next TopicJAVASCRIPT TRIGGER CLICK

← prev next →