Open In App

HTML DOM onbeforeunload Event

Improve
Improve
Like Article
Like
Save
Share
Report

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
        <a href="https://ide.geeksforgeeks.org/">
              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
        <a href="https://ide.geeksforgeeks.org/">GeeksforGeeks </a>
        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
        <a href="https://ide.geeksforgeeks.org/">
            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 


Last Updated : 22 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads