1、全屏模式:requestFullscreen()办法用于收回异步申请实现元素全屏显示
var screenDom = document.getElementById('monitoringStatistics');
if (screenDom.requestFullscreen) {screenDom.requestFullscreen();
} else if (screenDom.webkitRequestFullScreen) {screenDom.webkitRequestFullScreen();
} else if (screenDom.mozRequestFullScreen) {screenDom.mozRequestFullScreen();
} else if (screenDom.msRequestFullScreen) {screenDom.msRequestFullScreen();
}
2、勾销全屏模式:exitFullscreen()办法退出全屏模式
if (document.exitFullscreen) {document.exitFullscreen();
} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {document.msExitFullscreen();
}
requestFullscreen()办法只能在用户交互或者设施方向扭转的时候调用,否则将会失败,比方:在 onload 事件中不能触发
路由页面跳转需先退出全屏模式
进入全屏的元素,将脱离其父元素,所以可能导致之前某些 css 的生效,能够应用 :full-screen 伪类解决
为元素增加全屏时的款式(应用时为了兼容留神增加 -webkit、-moz 或 -ms 前缀)
一个元素 A 全屏后,其子元素要再全屏,需先让元素 A 退出全屏
[感激这位博主的贡献:]以上链接来自:(https://blog.csdn.net/xiaoxia…)