HTML | DOM onbeforeprint Event

The onbeforeprint event occurs when a user gives a command to print a page. A dialog box will display just before printing the page. The onbeforeprint event is the opposite of the onafterprint event.

Syntax:

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

Below examples illustrate the onbeforeprint Event in HTML DOM:

  • Example: Using HTML
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <!DOCTYPE html>
    <html>
      
    <body onbeforeprint="myFunction()">
        <center>
            <h1 style="color:green">
              GeeksforGeeks
          </h1>
            <p>Try to print this page you will see a alert</p>
            <script>
                function myFunction() {
                    alert("You are going to print this page");
                }
            </script>
        </center>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    After giving the print command:

  • Example: Using javascript
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <body>
        <center>
            <h1 style="color:green">
              GeeksforGeeks
          </h1>
            <p>Try to print this page you will see a alert</p>
            <script>
                document.getElementsByTagName("BODY")[0].onbeforeprint = function() {
                    myFunction()
                };
      
                function myFunction() {
                    alert("You are going to print this page");
                }
            </script>
      </center>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    After giving the print command:

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

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <body>
        <center>
            <h1 style="color:green">
              GeeksforGeeks
          </h1>
            <p>Try to print this page you will see a alert</p>
      
            <script>
                window.addEventListener("beforeprint", myFunction);
      
                function myFunction() {
                    alert("You are going to print this page");
                }
            </script>
        </center>
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    After giving the print command:

Supported Browsers: The browser supported by HTML DOM onbeforeprint event are listed below:

  • Google Chrome 63.0
  • Internet Explorer
  • Firefox


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.