如何编写兼容iPhone Safari等多浏览器的JavaScript退出全屏功能

核心兼容性问题原因 #

• iOS 12及更早版本的iPhone Safari中，<video>元素的全屏逻辑分两种：标准Document全屏API、video元素自带的webkit专属全屏控制逻辑，你现有代码只覆盖了document级的退出逻辑，没有处理video元素自带的全屏场景。
• 老版本iOS Safari要求全屏状态变更（包括退出）的调用必须在用户交互事件（比如click、touchend）的同步回调中执行，异步调用会被浏览器安全策略直接拦截失效。

兼容全平台的退出全屏实现 #

var exitFullScreen = function() {
  // 全场景判断当前是否处于全屏状态
  var wasFullScreen = !!(document.fullscreenElement || 
    document.mozFullScreenElement || 
    document.webkitFullscreenElement || 
    document.msFullscreenElement ||
    // 兼容iOS Safari video自带全屏的状态判断
    (document.querySelector('video') && document.querySelector('video').webkitDisplayingFullscreen));

  // 优先走标准document级退出逻辑
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else {
    // 兜底兼容iOS老版本Safari的video自带全屏
    var fullVideo = document.querySelector('video:-webkit-full-screen') || document.querySelector('video');
    if (fullVideo && fullVideo.webkitExitFullscreen) {
      fullVideo.webkitExitFullscreen();
    }
  }
  return wasFullScreen;
}

额外注意事项 #

• 确保exitFullScreen的调用是在用户主动触发的事件回调中执行，不要在setTimeout、Promise.then等异步逻辑里直接调用，老版本iOS Safari会拦截非用户触发的全屏状态变更操作。
• 如果页面存在多个video元素，可将兜底逻辑中的querySelector替换为遍历所有video元素，判断webkitDisplayingFullscreen状态后针对性调用退出方法。

内容的提问来源于stack exchange，提问作者ginjaemocoes