HTML DOM fullscreenEnabled()用法及代碼示例

HTML DOM中的fullscreenEnabled()方法用於檢查是否可以全屏模式查看文檔。它返回一個隻讀的布爾值。此方法可能需要特定的前綴才能與不同的瀏覽器一起使用。

用法:

document.fullscreenEnabled()

參數：此方法不接受任何參數。

返回值：它返回布爾值：

True:是否可以全屏模式查看文檔。
False:如果無法以全屏模式查看文檔。

範例1：

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            HTML DOM fullscreenEnabled() method 
        </title> 
          
        <!-- script to check full screen enabled or not -->
        <script> 
            function requestFullScreen() { 
                let isFullscreenSupported = 
                  
                    /* Standard syntax */ 
                    (document.fullscreenEnabled ||  
                      
                    /* Chrome, Safari and Opera */ 
                    document.webkitFullscreenEnabled || 
                      
                     /* Firefox */ 
                    document.mozFullScreenEnabled || 
                      
                    /* IE/Edge */ 
                    document.msFullscreenEnabled); 
      
                document.querySelector('.isSupported').innerHTML  
                        = isFullscreenSupported; 
            } 
        </script> 
    </head> 
      
    <body> 
        <h1> 
            GeeksforGeeks 
        </h1> 
          
        <h2> 
            fullscreenEnabled() method 
        </h2> 
          
        <!-- script called here -->
        <button onclick="requestFullScreen();"> 
            Check fullscreen supported 
        </button> 
          
        <p>Fullscreen support:</p> 
          
        <div class="isSupported"></div> 
          
    </body> 
</html>

輸出：
之前單擊按鈕：
check_fullscreen
單擊按鈕後：
check_fullscreen_output

範例2：

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            HTML DOM fullscreenEnabled() method 
        </title> 
          
        <!-- script to enable full screen -->
        <script> 
            function goFullScreen() { 
                if ( 
                      
                    /* Standard syntax */ 
                    document.fullscreenEnabled ||  
                      
                    /* Chrome, Safari and Opera */ 
                    document.webkitFullscreenEnabled ||  
                      
                    /* Firefox */ 
                    document.mozFullScreenEnabled || 
                      
                    /* IE/Edge */ 
                    document.msFullscreenEnabled  
                ) { 
                    elem = document.querySelector('#image'); 
                    elem.requestFullscreen(); 
                } 
                else { 
                    console.log('Fullscreen not enabled') 
                } 
            } 
        </script> 
    </head> 
      
    <body> 
        <h1>GeeksforGeeks</h1> 
          
        <h2> 
            HTML DOM fullscreenEnabled() method 
        </h2> 
          
        <img id = "image" src = 
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" /> 
        <br> 
          
        <button onclick = "goFullScreen();"> 
            Fullscreen 
        </button> 
          
    </body> 
</html>

輸出：
之前單擊按鈕：
go-fullscreen
單擊按鈕後：
go-fullscreen-output

支持的瀏覽器：下麵列出了fullscreenEnabled()方法支持的瀏覽器：

Google Chrome 45.0 -webkit-
Firefox 47.0 -moz-
Internet Explorer 11.0 -ms-
蘋果Safari 5.1 -webkit-
Opera 15.0 -webkit-

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 HTML | DOM fullscreenEnabled() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。