HTML5--浏览器全屏操作、退出全屏、是否全屏

爱被打了一巴掌 2021-10-23 14:12 834阅读 0赞

HTML5—浏览器全屏操作、退出全屏、是否全屏

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div>
  9.     <img src="../images/l1.jpg" alt="">
  10.     <input type="button" id="full" value="全屏">
  11.     <input type="button" id="cancelFull" value="退出全屏">
  12.     <input type="button" id="isFull" value="是否全屏">
  13. </div>
  14. <script>
  15.     /*全屏操作的主要方法和属性
  16.     * 1.requestFullScreen():开启全屏显示
  17.     *   不同浏览器需要添加不同的前缀
  18.     *   chrome:webkit   firefox:moz   ie:ms   opera:o
  19.     * 2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
  20.     * 3.fullScreenElement:是否是全屏状态，也只能使用document进行判断*/
  22.     window.οnlοad=function(){
  23.         var div=document.querySelector("div");
  24.         /*添加三个按钮的点击事件*/
  25.         /*全屏操作*/
  26.         document.querySelector("#full").οnclick=function(){
  27.             /*div.requestFullScreen();*/
  28.             /*div.webkitRequestFullScreen();*/
  29.             /*div.mozRequestFullScreen();*/
  30.             /*使用能力测试添加不同浏览器下的前缀*/
  31.             if(div.requestFullScreen){
  32.                 div.requestFullScreen();
  33.             }
  34.             else if(div.webkitRequestFullScreen){
  35.                 div.webkitRequestFullScreen();
  36.             }
  37.             else if(div.mozRequestFullScreen){
  38.                 div.mozRequestFullScreen();
  39.             }
  40.             else if(div.msRequestFullScreen){
  41.                 div.msRequestFullScreen();
  42.             }
  43.         }
  45.         /*退出全屏*/
  46.         document.querySelector("#cancelFull").οnclick=function(){
  47.             if(document.cancelFullScreen){
  48.                 document.cancelFullScreen();
  49.             }
  50.             else if(document.webkitCancelFullScreen){
  51.                 document.webkitCancelFullScreen();
  52.             }
  53.             else if(document.mozCancelFullScreen){
  54.                 document.mozCancelFullScreen();
  55.             }
  56.             else if(document.msCancelFullScreen){
  57.                 document.msCancelFullScreen();
  58.             }
  59.         }
  61.         /*判断是否是全屏状态*/
  62.         document.querySelector("#isFull").οnclick=function(){
  63.             /*两个细节：使用document判断  能力测试*/
  64.             if(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement){
  65.                 alert(true);
  66.             }
  67.             else{
  68.                 alert(false);
  69.             }
  70.         }
  71.     }
  72. </script>
  73. </body>
  74. </html>

　　

posted on 2019-08-08 16:34 eadela 阅读( …) 评论( …) 编辑 收藏

转载于:https://www.cnblogs.com/eadela/p/11322037.html

发表评论

表情：
评论列表 （有 0 条评论，834人围观）

还没有评论，来说两句吧...

相关阅读