JS全屏操作_实现全屏和退出全屏

实现效果：

点击 “全屏显示”，网站全屏，显示 “退出全屏” 按钮；反向操作同理。并且监听浏览器全屏事件，执行相应的操作。

进入全屏

function launchFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullScreen()
  }
}
launchFullscreen(document.documentElement)
launchFullscreen(document.getElementById("id")) //某个元素进入全屏

退出全屏

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen()
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen()
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen()
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen()
  }
}
exitFullscreen()

全屏事件

一：监听进入全屏

document.addEventListener("fullscreenchange", function (e) {
  if (document.fullscreenElement) {
    console.log('进入全屏')
  } else {
    console.log('退出全屏')
  }
})

如果要考虑兼容性：

function fullFun(){
  let fullscreenElement = document.fullscreenElement    || document.mozFullScreenElement || document.webkitFullscreenElement;
  if (fullscreenElement ) {
    console.log('进入全屏')
  } else {
    console.log('退出全屏')
  }
}
document.addEventListener('fullscreenchange', fullFun);
document.addEventListener('webkitfullscreenchange', fullFun);
document.addEventListener('mozfullscreenchange', fullFun);
document.addEventListener('MSFullscreenChange', fullFun);

fullscreenchange事件：浏览器进入或离开全屏时触发。

二：监听无法进入全屏

function fullErr(){
  console.log("浏览器无法进入全屏时触发");
}
document.addEventListener('fullscreenerror', fullErr);
document.addEventListener('webkitfullscreenerror', fullErr);
document.addEventListener('mozfullscreenerror', fullErr);
document.addEventListener('MSFullscreenError', fullErr);

fullscreenerror事件：浏览器无法进入全屏时触发，可能是技术原因，也可能是用户拒绝。

全屏属性

一、fullscreenElement

fullscreenElement属性返回正处于全屏状态的Element节点，如果当前没有节点处于全屏状态，则返回null。

let fullscreenElement = document.fullscreenElement    || document.mozFullScreenElement || document.webkitFullscreenElement;

二、fullscreenEnabled

fullscreenEnabled属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。主要用于：进入全屏操作前判断浏览器是否支持全屏，不支持给出提示。

let fullscreenEnabled = document.fullscreenEnabled ||
	document.mozFullScreenEnabled ||
	document.webkitFullscreenEnabled ||
	document.msFullscreenEnabled;
if (fullscreenEnabled) {
	console.log('浏览器支持全屏');
} else {
	console.log('浏览器当前不能全屏');
}

全屏状态下的CSS

全屏状态下，大多数浏览器的CSS支持:full-screen伪类，只有IE11支持:fullscreen伪类。使用这个伪类，可以对全屏状态设置单独的CSS属性。

:-webkit-full-screen {
  /* properties */
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

/* deeper elements */
video:-webkit-full-screen {
	width: 100%;
	height: 100%;
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_10853