JavaScript全屏API_页面全屏控制-js教程-PHP中文网

JavaScript全屏API_页面全屏控制

狼影

发布： 2025-11-28 20:36:07

原创

126人浏览过

调用 requestFullscreen() 方法可在用户操作中触发全屏，作用于 document.documentElement 或指定元素，需处理浏览器前缀兼容；通过 exitFullscreen() 退出全屏；监听 fullscreenchange 事件可检测状态变化并更新 UI，使用时应遵循安全策略避免滥用。

javascript全屏api_页面全屏控制

JavaScript 全屏 API 提供了一种让网页元素（通常是整个页面或某个特定区域）进入和退出全屏模式的方法，适用于视频播放、游戏、演示等需要沉浸式体验的场景。使用这个 API 可以让用户通过编程方式控制浏览器的显示状态。

如何触发全屏模式

要让页面或某个元素进入全屏，可以调用 requestFullscreen() 方法。该方法必须在用户操作（如点击事件）中调用，否则会被浏览器阻止以防止滥用。

对 document.documentElement 调用可使整个页面全屏
也可以对某个具体 DOM 元素调用，仅该元素进入全屏
需注意不同浏览器前缀差异，如旧版 Chrome 使用 webkitRequestFullscreen

// 进入全屏
function enterFullscreen() {
  const elem = document.documentElement;
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { // Safari
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { // IE/Edge
    elem.msRequestFullscreen();
  }
}

登录后复制

退出全屏模式

退出全屏可通过 exitFullscreen() 方法实现，它作用于 document 对象，不能用于单个元素。

调用后页面会恢复到正常视图
同样存在浏览器兼容性前缀问题

// 退出全屏
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

登录后复制

监听全屏状态变化

可以通过监听 fullscreenchange 事件来获知全屏状态是否发生变化，从而更新 UI 按钮或执行其他逻辑。

phpapp威客系统

PHPAPP 是EDOOG 旗下新产品，全球领先的网站应用系统。PHPAPP 全球网站应用的开创者,独创系统核心长期提供丰富网站应用程序,专为站长企业打造盈利应用。威客交易程序站长赚钱首选程序!!!安全：独创全ID URL直接屏蔽SQL注入问题,提供过虑系统对提交的数据进行过虑。高效：独创 AVC ( 应用Application 视图 View 和控制Controller ) 面向过程垂直

查看详情

立即学习“Java免费学习笔记（深入）”；

事件在进入或退出全屏时都会触发
可通过检查 document.fullscreenElement 判断当前是否有元素处于全屏

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    console.log('已进入全屏');
  } else {
    console.log('已退出全屏');
  }
});

登录后复制

基本上就这些。使用全屏 API 时要注意安全策略和用户体验，避免未经用户同意自动进入全屏。兼容性方面建议封装通用函数处理不同浏览器前缀。不复杂但容易忽略细节。

以上就是JavaScript全屏API_页面全屏控制的详细内容，更多请关注php中文网其它相关文章！