requestFullscreen

2024-10-04 09:53:06 浏览数 (3)

每一次克制自己,就意味着比以前更强大。——高尔基

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullscreen

Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

比如我们全屏幕整个页面:

代码语言:javascript复制
document.documentElement.requestFullscreen();

又或者我们为其封装一个切换全屏的函数

代码语言:javascript复制
function toggleFullScreen() {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

甚至仅仅只是全屏某一元素,比如这里全屏一个video

代码语言:javascript复制
function toggleFullscreen() {
  let elem = document.querySelector("video");

  if (!document.fullscreenElement) {
    elem.requestFullscreen().catch((err) => {
      alert(`尝试启用全屏模式时出错:${err.message}(${err.name})`);
    });
  } else {
    document.exitFullscreen();
  }
}

0 人点赞