.jsp 页面
<img alt="" src="../static/images/Full_Screen.png" height="30" width="30" title="Full screen" id="fullscreen" name="fullscreen"/>
<img alt="" src="../static/images/Exit_full_screen.png" height="30" width="30" title=" Exit Full screen" id="exitFullscreen" name="exitFullscreen"/>
.js
var full=0;
$(function() {
$('#exitFullscreen').hide();//hide exit fullscreen image on page load
$('#exitFullscreen').click(function() {
exitFullscreen();//function to exit from full screen
});
$('#fullscreen').click(function() {
fullscreen();//function to get full screen
});
});
//if user click f11 instead button we have to toggle ....
$(document).keyup(function(e){
if(e.which==122){
e.preventDefault();//kill anything that browser may have assigned to it by default
if(full==1){
exitFullscreen();
}
else {
fullscreen();
}
}
});
function fullscreen() {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
$('#exitFullscreen').show();
$('#fullscreen').hide();
full=1;
}
function exitFullscreen() {
if (document.cancelFullScreen) {
document.cancelFullScreen();}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
$('#exitFullscreen').hide();
$('#fullscreen').show();
full=0;
}
//worked on moxz