HTML | DOM fullscreenchange Event

The fullscreenchange event occurs when user viewed an element in fullscreen mode.The element.requestFullscreen() method is used to view an element in fullscreen mode and the element.exitFullscreen() method to cancel fullscreen mode.

Syntax:

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

Below examples illustrate the fullscreenchange Event in HTML DOM:



  • Example 1: This example illustrates HTML DOM fullscreenchange event.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <meta name="viewport" 
        content="width=device-width, initial-scale=1">
    </head>
      
    <body onfullscreenchange="function()">
        <center>
        <h1 id="geeks" style="color:green;">
                                    GeeksforGeeks</h1>
        <h3>Fullscreen with JavaScript</h3>
        <p>Click on the button to open this
                          page in fullscreen mode.</p>
        <button onclick="openFullscreen();">
                              Fullscreen Mode</button>
        <button onclick="closeFullscreen();">
               Close Fullscreen or pres "Esc"</button>
          
        <script>
            var gfg = document.documentElement;
            function openFullscreen() {
                if (gfg.requestFullscreen) {
                    gfg.requestFullscreen();
                }
            }
            function closeFullscreen() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                
            }
              
        </script>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

  • Example 2: This example uses JavaScript for fullscreenchange event.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <meta name="viewport" 
        content="width=device-width, initial-scale=1">
    </head>
      
    <body>
        <center>
        <h1 id="geeks" style="color:green;">
                                    GeeksforGeeks</h1>
        <h3>Fullscreen with JavaScript</h3>
        <p>Click on the button to open this
                          page in fullscreen mode.</p>
        <button onclick="openFullscreen();">
                              Fullscreen Mode</button>
        <button onclick="closeFullscreen();">
               Close Fullscreen or pres "Esc"</button>
      
        <script>
            var gfg = document.documentElement;
            function openFullscreen() {
                if (gfg.requestFullscreen) {
                    gfg.requestFullscreen();
                }
            }
            function closeFullscreen() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                
            }
            var output = document.getElementById("geeks");
            document.onfullscreenchange (function() {
            });
        </script>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

  • Example 3: This example uses addEventListener() method for fullscreenchange event.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <meta name="viewport" 
        content="width=device-width, initial-scale=1">
    </head>
      
    <body>
        <center>
        <h1 id="geeks" style="color:green;">
                                   GeeksforGeeks</h1>
        <h3>Fullscreen with JavaScript</h3>
        <p>Click on the button to open this 
                         page in fullscreen mode.</p>
        <button onclick="openFullscreen();">
                             Fullscreen Mode</button>
        <button onclick="closeFullscreen();">
              Close Fullscreen or pres "Esc"</button>
          
        <script>
            var gfg = document.documentElement;
            function openFullscreen() {
                if (gfg.requestFullscreen) {
                    gfg.requestFullscreen();
                }
            }
            function closeFullscreen() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                
            }
            var output = document.getElementById("geeks");
            document.addEventListener("fullscreenchange", function() {
                output.innerHTML = "A computer science portal for geeks";
            });
        </script>
    </body>
      
    </html>                    

    chevron_right

    
    

    Output:

    Supported Browsers: The browser supported by HTML DOM fullscreenchange Event are listed below:

  • Google Chrome 45.0
  • Internet Explorer 11.0
  • Firefox 47.0
  • Apple Safari 5.1
  • Opera 15.0


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.



Improved By : nidhi_biet



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.