Html5 Api 实现浏览器全屏

       一、全屏方法和事件

       1、全屏显示

        function fullScreen(toFullScreenElement)
        {
            var docElm =toFullScreenElement ;

           //W3C
            if (docElm.requestFullscreen) { //不能用document.requestFullscreen判断
                docElm.requestFullscreen();
                document.addEventListener("fullscreenchange", removeFullScreenEle, false);//监听全屏改变事件
            }
           //FireFox
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
                document.addEventListener("mozfullscreenchange", removeFullScreenEle, false);//监听事件方法不能加参数，如果按esc退出的话则无法传递参数
            }
           //Chrome等
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
                document.addEventListener("webkitfullscreenchange",removeFullScreenEle, false);
            }
            //IE11
            else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
                document.addEventListener("MSFullscreenChange", removeFullScreenEle, false); //注意IE全屏状态改变事件名不能用小写mfsfullscreenchange,否则无法监听到,其他浏览器可以用小写

            };

        }
        2、退出全屏
        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();

            };

        }

       3、全屏改变事件
       function removeFullScreenEle() {

        if (fullEle.requestFullscreen) {
            if(document.fullscreen)

             {

                    //全屏后操作

            }

            else

            {

                   //退出全屏后操作

           }

        }
        //FireFox
        else if (fullEle.mozRequestFullScreen) {
            if(document.mozFullScreen)

             {

                    //全屏后操作

            }

            else

            {

                   //退出全屏后操作

           }       

         }
        //Chrome等
        else if (fullEle.webkitRequestFullScreen) {

            if(document.webkitIsFullScreen)

            {

                    //全屏后操作

            }

            else

            {

                   //退出全屏后操作

           }

        }
        //IE11
        else if (fullEle.msRequestFullscreen) {
            if(document.msFullscreenElement)

            {

                    //全屏后操作

            }

            else

            {

                   //退出全屏后操作

           }

        }

       }

       4、设置全屏样式

             1、统一设置           

                  html:-moz-full-screen {  

                   background: red;  

                   }  

                  html:-webkit-full-screen {  

                  background: red;  

                  }  

                  html:fullscreen {  

                   background: red;  

                  }

                  html:-ms-fullscreen{
                   background:red !important;//如果有单独对全屏元素设置样式，则必须用!important标志，应该是在IE下系统默认全屏样式优先级低于自定义css样式
                  }

             2、单独设置

                     #element:-moz-full-screen{}

                     #element:-webkit-full-screen{}

                     #element:fulscreen{}

                     #element:-ms-fullscreen{}

       二、使用

       1、整个浏览器全屏

            fullScreen(document.documentElement);

       2、某个元素全屏

             fullScreen(document.getElementById('div1'));

       3、退出全屏

             exitFullScreen();

         注意：IE下全屏改变事件不能用小写的mfsfullscreenchange，而要用大写的MSFullscreenChange