HTML5全屏浏览API

最新推荐文章于 2017-12-11 17:01:13 发布

水中残月

最新推荐文章于 2017-12-11 17:01:13 发布

阅读量313

点赞数

分类专栏： HTML5

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
  <title> FullScreen API 演示</title>
  <meta name="Generator" content="EditPlus">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="Author" content="renfufei@qq.com">
  <meta name="Description" content="http://davidwalsh.name/more-html5-apis">
  <script>
    // 处理全屏(需要全屏显示DOM元素)
    function launchFullScreen(element) {
      // 先检测最标准的方法
      if(element.requestFullScreen) {
        element.requestFullScreen();
      } else if(element.mozRequestFullScreen) {
        // 其次，检测Mozilla的方法
        element.mozRequestFullScreen();
      } else if(element.webkitRequestFullScreen) {
        // if 检测 webkit的API
        element.webkitRequestFullScreen();
      }
    };
    // 退出全屏,不用管具体是哪个元素，因为屏幕是唯一的。
    function cancelFullscreen() {
      if(document.cancelFullScreen) {
        document.cancelFullScreen();
      } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if(document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      }
    };
    // 显示全屏信息
    function dumpFullscreen() {
        var d = document;
        var fullE = null;
        var fullEnable = "fullScreen is disable!";
        if(d.fullScreenElement){
            fullE = d.fullScreenElement;
        } else if(d.mozFullScreenElement){
            // 如果有问题，把mozFullscreenElement 改为 mozFullScreenElement,S大写
            fullE = d.mozFullScreenElement;
        } else if(d.webkitFullscreenElement){
            // 本人的为chrome， Fullscreen 之中，s为小写。
            fullE = d.webkitFullscreenElement;
        }
        // 如果有问题，请切换 fullScreen 中 s 的大小写。
        if(d.fullScreenEnabled){
            fullEnable = d.fullScreenEnabled;
        } else if(d.mozFullScreenEnabled){
            fullEnable = d.mozFullScreenEnabled;
        } else if(d.webkitFullscreenEnabled){
            // 注意 Fullscreen 的中间s大小写
            fullEnable = d.webkitFullscreenEnabled;
        }
        //
        if(window.console){
            console.dir(fullE);
        } else if(fullE){
            alert(fullE.tagName);
        } else {
            alert("全屏元素是:"+fullE);
        }
        //
        if(window.console){
            console.info("允许全屏:"+fullEnable);
        } else if(fullEnable){
            alert("允许全屏:"+fullEnable);
        } else {
            alert("允许全屏:"+fullEnable);
        }
    };
    // 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。
    window.addEventListener("DOMContentLoaded", function() {
        // 获取DOM元素
        var enterfull = document.getElementById("enterfull");
        var quitfull = document.getElementById("quitfull");
        var dumpfull = document.getElementById("dumpfull");
             
        // 事件监听
        enterfull.addEventListener("click", function() {
            //
            launchFullScreen(document.documentElement);
        });
        quitfull.addEventListener("click", function() {
            //
            cancelFullscreen();
        });
        dumpfull.addEventListener("click", function() {
            //
            dumpFullscreen();
        });
 
    }, false);
    // 全屏事件Events
    document.addEventListener("fullscreenchange", function(e) {
      console.dir(e);
    });
    document.addEventListener("mozfullscreenchange", function(e) {
      console.dir(e);
    });
    document.addEventListener("webkitfullscreenchange", function(e) {
      console.dir(e);
    });
  </script>
 </head>
 
 <body>
    <div>
        <button id="enterfull">进入全屏</button><br/>
        <button id="quitfull">退出全屏</button><br/>
        <button id="dumpfull"> 查看全屏的DOM元素</button><br/>
    </div>
 </body>
</html>

水中残月

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5全屏浏览API

FullScreen API 演示 // 处理全屏(需要全屏显示DOM元素) function launchFullScreen(element) { // 先检测最标准的方法 if(element.requestFullScreen) { element.requestFullScreen(); }
复制链接

扫一扫

专栏目录