使用fullscreen API全屏浏览网页

给博客加了一个小功能,全屏显示页面,使用的是HTML5的Fullscreen API,简单介绍一下这个API的使用。

如何使用

方法

有两个方法,用来进入全屏和取消全屏,分别是

  • requestFullscreen()
  • cancleFullscreen()/exitFullscreen()

属性

以及两个只读属性,分别是当前全屏展示的元素和全屏是否允许,

  • document.webkitFullscreenElement(返回节点)
  • document.webkitFullscreenEnabled(返回布尔值)

HTML 标签属性: allowFullScreen,像flash使用的<object><embed>可以设置是否允许全屏,这个特性同样可以应用于<iframe>标签:

<iframe src="" allowFullScreen=""></iframe>    

全屏样式

全屏元素的样式:

:-webkit-full-screen{
    width:100%;
    height:100%;
    background: #11ee11;
}
:-moz-full-screen{
    width:100%;
    height:100%;
    background: #11ee11;
}
:-ms-fullscreen{
    width:100%;
    height:100%;
    background: #11ee11;
}
:fullscreen{
    width:100%;
    height:100%;
    background: #11ee11;
}

所有全屏化的祖先元素样式:
:fullscreen-ancestor{
z-index: -1;
}

监听状态变化

可以监听全屏状态的变化:

element.addEventListener("fullscreenchange", function(e){
    //不同的浏览器需要添加相应的前缀,webkit、moz、ms;
})    

例子

点击下面的红色方块,将会使这个方块进去全屏样式,并且改变背景的颜色。或者点击页面右上角的全屏图标也可以进入全屏。

See the Pen pfybn by 旭鸿 (@xuhong) on CodePen.

<script>
    function launchFullscreen(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();
      } else if(document.msExitFullscreen) {
          document.msExitFullscreen();
      }
    }

    var rosa = document.getElementById('rosa');        
    var btn1 = document.getElementsByTagName("button")[0];
    var btn2 = document.getElementsByTagName("button")[1];

    document.addEventListener("keydown", function(e) {
        if (e.keyCode == 13) {
            launchFullscreen(rosa);
        }
    });
    btn1.addEventListener("click", function(){
        launchFullscreen(rosa);
    });
    btn2.addEventListener("click", function(){
        exitFullscreen();
    })
</script>

兼容性

在桌面上主流浏览器(只测试了最新版)都支持,移动设备上呢,经测试firefox和chrome都支持啦,国产浏览器测试了UC和QQ浏览器,不负众望,都不支持。。。

caniuse

一点心得

其实我们对全屏并不陌生,我们在看视频的时候经常会使用全屏模式,当然,之前的那些都不是HTML5实现的。全屏的好处就是可以屏蔽掉那些可能分散我们注意力的元素,让我们可以更加专注于感兴趣的东西。这个api非常适合在mobile上web app使用,当进入全屏以后,整个感觉就像是一个完全独立的应用,非常的原生态。另外发现一个奇怪的bug,fullscreen的样式必须分开写,而不能用逗号隔开写在一起

参考资料

Comments

comments powered by Disqus
Copyright © 2013 BeYoung