十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
document.addEventListener("fullscreenchange", function( event ) {
成都创新互联专注于奎文企业网站建设,成都响应式网站建设公司,商城开发。奎文网站建设公司,为奎文等地区提供建站服务。全流程定制网站设计,专业设计,全程项目跟踪,成都创新互联专业和态度为您提供的服务
if (document.fullscreenElement) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}});
可以这样判断。但是旧版IE是不支持的。
注解:ele要全屏的元素
退出全屏直接使用document调用exitFullscreen方法即可。
document.fullscreenElement():获取当前全屏的元素。
注意:
1.document下没有requestFullscreen
2.requestFullscreen方法只能由用户触发,比如:在onload事件中不能触发
3.页面跳转需先退出全屏
4.进入全屏的元素,将脱离其父元素,所以可能导致某些css失效
解决方案:使用 :full-screen伪类 为元素添加全屏时的样式(使用时为了兼容注意添加-webkit、-moz或-ms前缀)
5.一个元素全屏后,其子元素要再全屏,需先让该元素退出全屏
点击按钮触发 requestFullscreen() 函数打开全屏
点击按钮触发 exitFullScreen() 函数关闭全屏
如果需要监听全屏状态变换,可以监听 fullscreenchange 时间