When a user attempts to access a webpage but the action fails, the page does not load, and a JavaScript onunload event is activated. It is important to note that the onunload event may also be triggered if the browser is closed while the page is still in a loaded state.
When a user navigates away from a webpage while performing actions such as selecting, submitting, clicking, or closing the browser window, the onunload event generally transitions into the onunload state. Furthermore, this occurrence takes place when a user attempts to load a URL or web browser and interacts with data while it is currently being loaded.
Syntax
The onunload event is utilized in the context of an HTML page through the implementation of a JavaScript function. Below are the syntaxes for both the HTML page and the JavaScript function.
- HTML Syntax:
Add attribute and value in html container or tag.
<element Onunload = "myData"> data </element>
- JavaScript Syntax:
Utilize the HTML attribute name within a JavaScript function.
object.onunload = function(){
//javascript code.
};
This attribute contains a singular value script that runs when the onunload event is activated.
Examples of onunload in JavaScript
The subsequent examples illustrate the onunload event along with its resulting output.
Example 1
This program illustrates the utilization of the onunload JavaScript function. Initially, the user employs this function to invoke a web page to execute its operations. Subsequently, the user attempts to close the window to verify whether the function has been reloaded via the script. Ultimately, an alert function is assigned through the script, as shown 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 output displayed below illustrates the details of the unonload event as presented within the alert function.
Example 2
The onunload function in JavaScript operates effectively in the provided example using the console method. The results generated by the onunload function's event are visible in the console tab, while the output rendered by the HTML page is shown directly 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 subsequent output displays details regarding the unonload event within the console function.
Example 3
The results of the onunload function's event are shown in the console tab, while the HTML page output is rendered on the web page. We can observe the onload function associated with the object of the specified id. This event is triggered on the body tag alongside the console tab, but it does not function with the alert method.
<!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 output provided below displays details regarding the onunload event within the console function.
Example 4
The output generated by the onunload function is shown in the console tab rather than on the HTML page itself. In this scenario, we utilize the window attribute in conjunction with the function to refresh the browser. While this method operates effectively within the console tab, it does not function as expected with 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 output displayed below illustrates the details regarding the unonload event within the alert function.
Example 5
The onunload functions, which are utilized within the HTML attribute, produce an output accordingly. This function operates effectively within the console tab, demonstrating its functionality through the use of a 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 output presented below displays information regarding the unonload event within 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 is activated when the page is unloaded, allowing for the display of information at that moment. This event is useful for refreshing and reloading web pages or browsers.