div实现全屏并ESC退出全屏

第一种方式

//**页面**
<div id="container" >
						//两个放大缩小的图片
						<img id="zoom" alt="" src="${ctxStatic}/images/zoom.png" onclick="showFull();">
						<img id="lessen" alt="" src="${ctxStatic}/images/lessen.png" onclick="delFull();">
						<div style="height: 500px;" title="" id="allmap"></div>
</div>

//放大
        var height=document.getElementById("allmap");
        var zoom=$("#zoom");
        var lessen=$("#lessen");
		function showFull(){
            var full=document.getElementById("container");
            zoom.hide();
            lessen.show();
            height.style.height="1918px";
            launchIntoFullscreen(full);
         }
		//缩小
	    function delFull() {
             exitFullscreen();
             lessen.hide();
             zoom.show();
             height.style.height="500px";
         }
         function launchIntoFullscreen(element) {
             if(element.requestFullscreen){
                 element.requestFullscreen();
             }
             else if(element.mozRequestFullScreen) {
                 element.mozRequestFullScreen();
             }
             else if(element.webkitRequestFullscreen) {
                 element.webkitRequestFullscreen();
             }
             else if(element.msRequestFullscreen) {
                 element.msRequestFullscreen();
             }
         }
         function exitFullscreen() {
             if(document.exitFullscreen) {
                 document.exitFullscreen();
             } else if(document.mozCancelFullScreen) {
                 document.mozCancelFullScreen();
             } else if(document.webkitExitFullscreen) {
                 document.webkitExitFullscreen();
             }
         }

     //监听全屏下的esc事件 注：这种方式对iframe可能不太好使，此处可用第二种方式的中监听不同浏览器的全屏事件，来实现
     window.onresize = function() {
         if (!checkFull()) {
             delFull();
         }
     };

     function checkFull() {
         var isFull = document.fullscreenEnabled
                 || window.fullScreen
                 || document.webkitIsFullScreen
                 || document.msFullscreenEnabled;

         if (isFull === undefined)
             isFull = false;
         return isFull;
     }

第二种方式

//监控F11键盘动作，监听不同浏览器的全屏事件，只有IE不好使
$(document).on('keydown', function (e) {
     var e = event || window.event || arguments.callee.caller.arguments[0];
     if(e && e.keyCode == 122){//捕捉F11键盘动作
       e.preventDefault();  //阻止F11默认动作
       var el = document.documentElement;
       var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API
　　　　　　//执行全屏
       if (typeof rfs != "undefined" && rfs) {
             rfs.call(el);
       } else if(typeof window.ActiveXObject != "undefined"){
             var wscript = new ActiveXObject("WScript.Shell");
             if (wscript!=null) {
                 wscript.SendKeys("{F11}");
             }
       }
　　　　　　//监听不同浏览器的全屏事件，并件执行相应的代码
       document.addEventListener("webkitfullscreenchange", function() {//
           if (document.webkitIsFullScreen) {
                //全屏后要执行的代码
           }else{
                //退出全屏后执行的代码
       　　}
       }, false);

       document.addEventListener("fullscreenchange", function() {
           if (document.fullscreen) {
                //全屏后执行的代码
           }else{
                //退出全屏后要执行的代码
           }
       }, false);

       document.addEventListener("mozfullscreenchange", function() {
           if (document.mozFullScreen) {
                //全屏后要执行的代码
           }else{
                //退出全屏后要执行的代码
           }
       }, false);

       document.addEventListener("msfullscreenchange", function() {
           if (document.msFullscreenElement) {
                //全屏后要执行的代码
           }else{
                //退出全屏后要执行的代码
           }
       }, false)
    }
}

参考文献：http://www.webhek.com/post/fullscreen.html
http://www.cnblogs.com/scot/p/5552051.html