<img id="alarm-fullscreen-toggler" src="#" alt="全屏按钮" />
// 设置全屏:目前这个方法无法监听 ESC 键盘按键
$('#alarm-fullscreen-toggler').on('click', function (e) {
var element = document.documentElement; // 返回 html dom 中的root 节点 <html>
if(!$('body').hasClass('full-screen')) {
$('body').addClass('full-screen');
$('#alarm-fullscreen-toggler').addClass('active');
// 判断浏览器设备类型
if(element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen){ // 兼容火狐
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) { // 兼容谷歌
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // 兼容IE
element.msRequestFullscreen();
}
} else { // 退出全屏
console.log(document);
$('body').removeClass('full-screen');
$('#alarm-fullscreen-toggler').removeClass('active');
// 退出全屏
if(document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
});
全屏模式有两种:
- F11 快捷键:把浏览器地址隐藏的全屏
- h5的全屏
api (requestFullScreen)
:设置需要全屏的 DOM 元素
document.body
与document.documentElement
的区别:
3. document.body
:返回html
DOM中的body
节点,即<body>
4. document.documentElement
:返回html
DOM 中的 root 节点,即<html>