HTML | DOM fullscreenchange 事件

fullscreenchange 事件在用户以全屏模式查看元素时发生。 element.requestFullscreen() 方法用于以全屏模式查看元素， element.exitFullscreen() 方法用于取消全屏模式。

支持的标签

• 它支持所有 HTML 元素。

句法：

• 在 HTML 中：

• 在 JavaScript 中：

object.onfullscreenchange = function(){myScript};

• 在 JavaScript 中，使用 addEventListener() 方法：

object.addEventListener("fullscreenchange", myScript);

下面的例子说明了 HTML DOM 中的 fullscreenchange 事件：

• 示例 1：此示例说明了 HTML DOM fullscreenchange 事件。

html

 

    

 

    
    
                                GeeksforGeeks
    Fullscreen with JavaScript
     
Click on the button to open this
                      page in fullscreen mode.
 
    
                          Fullscreen Mode
    
           Close Fullscreen or pres "Esc"
     
    
        var gfg = document.documentElement;
        function openFullscreen() {
            if (gfg.requestFullscreen) {
                gfg.requestFullscreen();
            }
        }
        function closeFullscreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
        }
         
    

 

• 输出：

• 示例 2：此示例将 JavaScript 用于 fullscreenchange 事件。

html

 

    

 

    
    
                                GeeksforGeeks
    Fullscreen with JavaScript
     
Click on the button to open this
                      page in fullscreen mode.
 
    
                          Fullscreen Mode
    
           Close Fullscreen or pres "Esc"
 
    
        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() {
        });
    

 
                   

• 输出：

• 示例 3：此示例对 fullscreenchange 事件使用 addEventListener() 方法。

html

 

    

 

    
    
                               GeeksforGeeks
    Fullscreen with JavaScript
     
Click on the button to open this
                     page in fullscreen mode.
 
    
                         Fullscreen Mode
    
          Close Fullscreen or pres "Esc"
     
    
        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";
        });
    

 
                   

• 输出：

• 谷歌浏览器 45.0
• 浏览器 11.0
• 火狐 47.0
• 苹果 Safari 5.1
• 歌剧 15.0