需求是这样的 ,有一个图标元素,点击后进入全屏,再次点击退出全屏。
实现代码:
<li id="fullscreen"><a href="#" ><span class="glyphicon glyphicon-resize-full "></span></a></li>
//控制全屏
function enterfullscreen() {//进入全屏
var docElm = document.documentElement;
//W3C
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome等
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
//IE11
else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
}
function exitfullscreen() { //退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
var a=0;
$('#fullscreen').on('click',function () {
a++;
a%2==1?enterfullscreen():exitfullscreen();
})