主要用到两个方法
调用各个浏览器提供的全屏方法
function handleFullScreen() { var de = document.documentElement; if (de.requestFullscreen) { de.requestFullscreen(); } else if (de.msRequestFullscreen) { de.msRequestFullscreen(); } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen(); } else { wtx.info("当前浏览器不支持全屏！"); } }
其中：msRequestFullscreen ie浏览器的全屏方法。
调用各个浏览器提供的退出全屏方法
function exitFullscreen() { var de = document; if(de.exitFullscreen) { de.exitFullscreen(); } else if(de.msExitFullscreen) { de.msExitFullscreen(); } else if(de.mozCancelFullScreen) { de.mozCancelFullScreen(); } else if(de.webkitExitFullscreen) { de.webkitExitFullscreen(); } }
其中：msExitFullscreen退出全屏ie浏览器的方法。
接下来就是调用两个封装好的方法实现全屏。
1、首先在body内放置一个点击事件，按钮；此处简写。
<body> <input class="enterClass" type="button" value="切换全屏" /> <input class="returnClass" type="button" value="退出全屏" /> </body>
2、获取.enterClass样式的点击事件,实现全屏
$(".enterClass").click(function () {
handleFullScreen(); //全屏
$('.enterClass').css('display','none');
$('.returnClass').css('display','block');
});
3、获取.returnClass样式的点击事件，退出全屏
$(".returnClass").click(function () {
exitFullscreen(); //退出全屏
$('.enterClass').css('display','block');
$('.returnClass').css('display','none');
});
其中enterClass 和 returnClass是此处按钮的样式以及位置的放置，如果想要给这个按钮加移入移除颜色的改变样式可以使用 id选择器的方式进行改变。
检测全屏
let fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled || undefined; if (fullscreenEnabled) { let de = document.documentElement; //打开全屏 if (de.requestFullscreen) { de.requestFullscreen().then( (status) => { // 正常打开全屏不需要任何操作 console.log('正常打开全屏'); // do something }, (err) => { console.log('不正常打开全屏') // do something } ); } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen() } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen(); } } else { console.log('无法打开全屏'); }
注意、API要求必须由用户触发，摸拟点击也无法通过。
