HTML DOM onbeforeunload Event

Last Updated : 06 May, 2025

The onbeforeunload event occurs when you click a text link or picture link or any kind of link which will bring you to a new page. This event will display a confirmation dialog box to inform the user whether the user wants to stay on the page or leave the current page and move on to the next linked page. The message in the dialog box cannot be removed.

Supported HTML Tags

<body>

Syntax:

In HTML:

<element onbeforeunload="myScript">

In JavaScript:

object.onbeforeunload = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("beforeunload", myScript);

The below examples illustrate the onbeforeunload Event in HTML DOM:

Example: Using HTML

HTML

<!DOCTYPE html>
<html>

<head>
	<title>
		HTML DOM onbeforeunload attribute
	</title>
	<style>
		body {
			text-align: center;
		}
		h1 {
			color: green;
		}
		a {
			text-decoration: none;
		}
	</style>
</head>

<body onbeforeunload="return myFunction()">
	<h1>GeeksforGeeks</h1>
	<h3>
		HTML DOM onbeforeunload attribute
	</h3>
	<p>
		Go to
		<a href="https://www.geeksforgeeks.org/community/">
			GeeksforGeeks 
		</a>
		Community
	</p>

	<script>
		function myFunction() {
			return "This document is ready to load";
		}
	</script>
</body>

</html>

Example: Using JavaScript

HTML

<!DOCTYPE html>
<html>

<head>
	<title>
		HTML DOM onbeforeunload attribute
	</title>
	<style>
		body {
			text-align: center;
		}
		h1 {
			color: green;
		}
		a {
			text-decoration: none;
		}
	</style>
</head>

<body>
	<h1>GeeksforGeeks</h1>
	<h3>
		HTML DOM onbeforeunload attribute
	</h3>
	<p>
		Go to
		<a href="https://www.geeksforgeeks.org/community/">GeeksforGeeks </a>
		ide
	</p>

	<script>
		window.onbeforeunload = 
		function (event) {
			event.returnValue = 
			"This document is ready to load";
		};
	</script>
</body>

</html>

Example: In JavaScript, using the addEventListener() method:

HTML

<!DOCTYPE html>
<html>

<head>
	<title>
		HTML DOM onbeforeunload attribute
	</title>
	<style>
		body {
			text-align: center;
		}
		h1 {
			color: green;
		}
		a {
			text-decoration: none;
		}
	</style>
</head>

<body>
	<h1>GeeksforGeeks</h1>
	<h3>
		HTML DOM onbeforeunload attribute
	</h3>
	<p>
		Go to
		<a href="https://www.geeksforgeeks.org/community/">
			GeeksforGeeks
		</a>
		Community
	</p>

	<script>
		window.addEventListener(
			"beforeunload", function (event) {
			event.returnValue = 
			"This document is ready to load";
		});
	</script>
</body>

</html>

Supported Browsers:

Google Chrome 1
Edge 12
Firefox 1
Safari 3
Opera 12

HTML DOM onopen Event

Vijay Sirra

Improve

Article Tags :

HTML DOM onbeforeunload Event

Similar Reads

Thank You!

What kind of Experience do you want to share?