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
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
GeeksforGeeks
</a>
ide
</p>
<script>
function myFunction() {
return "This document is ready to load";
}
</script>
</body>
</html>
|
Output:
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
ide
</p>
<script>
window.onbeforeunload =
function (event) {
event.returnValue =
"This document is ready to load";
};
</script>
</body>
</html>
|
Output:
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
GeeksforGeeks
</a>
ide
</p>
<script>
window.addEventListener(
"beforeunload", function (event) {
event.returnValue =
"This document is ready to load";
});
</script>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome 1
- Edge 12
- Firefox 1
- Safari 3
- Opera 12