JavaScript 全屏API

该窗口通过使用Web API支持全屏界面。我们可以激活或禁用屏幕的全屏模式。全屏API提供了在全屏模式下呈现特定元素的方法。

做法：

onclick 事件将触发activate()方法，用于激活全屏模式。
同样的方法也适用于退出全屏模式。

<button onclick="activate(document.documentElement);">
      Go To Full Screen
</button>
<button onclick="deactivate();">
      Leave Full Screen
</button>

示例： 下面的代码使用 requestFullscreen() 方法进行全屏操作，使用 exitFullscreen() 方法退出全屏操作。

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
</head> 
  
<body> 
    <h1 style="color: green">GeeksForGeeks</h1> 
  
    <h2>Window fullscreen property</h2> 
  
    <button onclick="activate(document.documentElement);"> 
        Go To Full Screen 
    </button> 
  
    <button onclick="deactivate();">Leave FullScreen</button> 
  
    <script> 
  
        // Function for full screen activation 
        function activate(ele) { 
            if (ele.requestFullscreen) { 
                ele.requestFullscreen(); 
            } 
        } 
  
        // Function for full screen activation 
        function deactivate() { 
            if (document.exitFullscreen) { 
                document.exitFullscreen(); 
            } 
        } 
    </script> 
</body> 
  
</html>

输出：

JavaScript 全屏API