利用浏览器全屏api实现js全屏

// 假设你有一个HTML元素，例如：<div id="myFullscreenElement">点击我全屏</div>

// 获取这个元素
var elem = document.getElementById("myFullscreenElement");

// 定义一个函数来请求全屏
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen().catch(err => {
      console.error("请求全屏失败:", err);
    });
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen().catch(err => {
      console.error("请求全屏失败:", err);
    });
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen().catch(err => {
      console.error("请求全屏失败:", err);
    });
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen().catch(err => {
      console.error("请求全屏失败:", err);
    });
  }
}

// 你可以在点击事件或任何其他适当的事件中调用这个函数
elem.addEventListener("click", openFullscreen);

请注意，全屏请求必须由用户行为（如点击事件）触发，并且可能会因为浏览器的安全策略或用户的浏览器设置而被拒绝。此外，并非所有浏览器都支持`requestFullscreen`方法，因此我在示例中提供了几种不同浏览器的兼容性写法。

上面的代码段中，我们首先获取了ID为`myFullscreenElement`的元素，并定义了一个`openFullscreen`函数来请求该元素进入全屏模式。然后，我们为这个元素添加了一个点击事件监听器，以便在点击时调用`openFullscreen`函数。

另外，由于全屏API的异步性质，`requestFullscreen`方法返回一个Promise对象，因此我们可以使用`.catch()`方法来捕获并处理可能发生的错误。不过，并非所有浏览器的实现都返回Promise，因此这里的`.catch()`主要是为了示例的完整性和未来兼容性考虑。在实际应用中，如果浏览器不支持Promise，这部分代码将不会执行。