Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM onbeforeunload Event

  • Last Updated : 16 Oct, 2019

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 move on to the next linked page. The message in dialog box cannnot be removed.

Syntax:

  • In HTML:
    <element onbeforeunload="myScript">
  • In JavaScript:
    object.onbeforeunload = function(){myScript};
  • In JavaScript, using the addEventListener() method:
    object.addEventListener("beforeunload", myScript);

Below examples illustrate the onbeforeunload Event in HTML DOM:

  • Example: Using 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:
    After loading the code:

    After clicking the text link:

  • Example: Using JavaScript




    <!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:
    After loading the code:

    After clicking the text link:

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




    <!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:
    After loading the code:

    After clicking the text link:

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera 15.0

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :