requestFullScreen

1、要对某个元素使用全屏特效，标准的流程是：

①调用这个元素对象的 requestFullscreen()方法；
②浏览器将元素全屏显示，改变相关的属性值，然后触发 document 的 fullscreenchange事件；
③退出全屏时有两种方式，一种是默认的按 ESC键退出，一种是调用 document的 exitFullscreen() 方法；
④浏览器将元素退出全屏显示，改变相关属性值，再次触发 fullscreenchange
方法。
举例说明全屏显示

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Examples</title>
       <style type="text/css">
           #box{
               width: 100px;
               height: 100px;
               background-color: pink;
           }
       </style>
   </head>
   <body>
       <div id="box"></div>
   </body>

    <script type="text/javascript">
        // requestFullscreen()  全屏显示

      // try {

   //          console.log(x);

   //      }catch (e){

   //          throw new Error("您输出的变量没有进行定义");
   //      }


        //requestFullScreen  全屏显示

        var box = document.querySelector("#box");
        // 做一下浏览器适配

        box.requestFullScreen = box.requestFullScreen || box.mozRequestFullScreen || box.webkitRequestFullScreen;

        document.exitFullScreen = document.exitFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen;


        box.onclick = function (e) {

            // 判断当前是否是全屏状态 webkit 下 要加 Is
            if (document.webkitIsFullScreen || document.mozFullScreen || document.fullScreen){

                //异常处理
                //如果try 里面的代码报错 则执行 catch 的代码

                try {

                    document.exitFullScreen();

                }catch (e){

                    alert("您的浏览器不支持全屏!");
                }


            }else {


                try {

                    box.requestFullScreen();

                }catch (e){

                    alert("您的浏览器不支持全屏!");

                }
            }

        }
    </script>

</html>

requestFullScreen

推荐阅读更多精彩内容