HTML5 中怎么用全屏 API 兼容不同浏览器的前缀写法实现全屏切换-H5教程-PHP中文网

html5全屏api需兼容各浏览器前缀：进入全屏依次尝试requestfullscreen、webkitrequestfullscreen、mozrequestfullscreen、msrequestfullscreen；退出同理；状态检测和事件监听也需覆盖对应前缀；且必须由用户手势（如click）同步触发，否则失败。

html5 中怎么用全屏 api 兼容不同浏览器的前缀写法实现全屏切换

HTML5 全屏 API 实现切换，核心是正确调用 requestFullscreen 或 exitFullscreen，并覆盖主流浏览器的前缀差异。现代浏览器虽已普遍支持标准方法，但 Safari（尤其旧版）、Firefox 和部分 Edge/IE 仍需兼容写法，且必须由用户点击等手势触发，否则直接失败。

检测并调用全屏进入方法

不能直接写 element.requestFullscreen() 就完事，要逐级判断是否存在对应方法：

先检查 element.requestFullscreen（Chrome 71+、Firefox 64+、Safari 12.1+、Edge 79+）
再 fallback 到 element.webkitRequestFullscreen（Safari 5.1–12、Chrome 15–70）
接着是 element.mozRequestFullScreen（Firefox 9–63，注意大小写）
最后是 element.msRequestFullscreen（IE11、Edge 12–18）

封装示例：

function launchFullscreen(el) {
  if (!el) return;
  const method = el.requestFullscreen
    || el.webkitRequestFullscreen
    || el.mozRequestFullScreen
    || el.msRequestFullscreen;
  if (method) method.call(el);
}

退出全屏也要匹配前缀

退出不是只调 document.exitFullscreen() 就够了，同样需兼容：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

document.exitFullscreen()（标准）
document.webkitExitFullscreen()
document.mozCancelFullScreen()（注意是 Cancel，不是 Exit）
document.msExitFullscreen()

推荐封装统一退出函数：

function exitFullscreen() {
  const method = document.exitFullscreen
    || document.webkitExitFullscreen
    || document.mozCancelFullScreen
    || document.msExitFullscreen;
  if (method) method.call(document);
}

状态检测与事件监听必须同步处理

判断是否处于全屏，不能只看 document.fullscreenElement，要兼顾各前缀：

标准：document.fullscreenElement
Safari/Chrome：document.webkitFullscreenElement
Firefox：document.mozFullScreenElement
IE/Edge：document.msFullscreenElement

监听状态变化也需注册多个事件名：

document.addEventListener('fullscreenchange', handler);
document.addEventListener('webkitfullscreenchange', handler);
document.addEventListener('mozfullscreenchange', handler);
document.addEventListener('msfullscreenchange', handler);