封装Html5 Fullscreen API

当前位置 : 首页 > 网页制作 > html5 > 封装Html5 Fullscreen API

封装Html5 Fullscreen API

来源: 作者: 时间:2016-01-30 08:53
使用新的全屏 API,可以将用户的注意力导向特定元素,同时隐藏背景或转移对其他应用的注意力。因为W3C全屏规范还未达到最终版本,所以大多数浏览器供应商都使用唯一标识符为 AP
使用新的全屏 API,可以将用户的注意力导向特定元素,同时隐藏背景或转移对其他应用的注意力。因为W3C全屏规范还未达到最终版本,所以大多数供应商都使用唯一标识符为 API 添加前缀。在本例中,Microsoft 使用ms。最好是有单个函数可以请求所有前缀的全屏模式,类似于此处显示的大部分示例。若要获取更佳性能,请将 W3C API 名称放在第一,其后跟随设置前缀的版本。
 
 
 
进入,退出全屏或是否全屏事件:
 
    // Webkit (works in Safari5.1 and Chrome 15)
    element.webkitRequestFullScreen();
    document.webkitCancelFullScreen();
    测试环境chrome39支持document.webkitExitFullscreen()
    document.webkitIsFullScreen
     
    // Firefox 10+
    element.mozRequestFullScreen();
    document.mozCancelFullScreen();
    document.mozFullScreen
    
    //ie11
    element.msRequestFullscreen();
    document.msExitFullscreen();
     
    // W3C 提议
    element.requestFullscreen();
    document.exitFullscreen();
    document.fullscreen
 
接下来封装代码:
 
 
    !function(w,d){
        var fs={
                supportsFullScreen:false,
                isFullScreen:false,
                requestFullScreen:'',
                exitFullScreen:'',
                fullscreenchange:'',
                prefix:''
            },
            aP=['webkit','moz','ms'],    //opera 15 支持全屏是webkit内核
            len=aP.length,
            i=0;
        
        if(d.exitFullscreen){
            fs.supportsFullScreen=true
        }else{
            for(; i<len; i++){
                if(d[aP[i]+'ExitFullscreen'] || d[aP[i]+'CancelFullScreen']){
                    fs.supportsFullScreen=true;
                    fs.prefix=aP[i];
                    break
                }
            }
        }
        
        if(fs.supportsFullScreen){
            var p=fs.prefix;
            fs.fullscreenchange=function(fn){
                d.addEventListener(p=='ms' ? 'MSFullscreenChange' : p+'fullscreenchange',function(){
                    fn && fn()
                },false)
            };
            fs.fullscreenchange(function(){
                fs.isFullScreen=(function(p){
                    switch (p) {
                        case '':
                            return d.fullscreen;
                        case 'webkit':
                            return d.webkitIsFullScreen;
                        case 'moz':
                            return d.mozFullScreen;
                        case 'ms':
                            return d.msFullscreenElement ? true : false
                    }
                })(p)
            });
            fs.requestFullScreen=function(elem){
                var elem=elem || d.documentElement;
                try{
                    p ? elem[p+'RequestFullScreen']() : elem.requestFullScreen()    //chrome,ff,标准
                }catch(e){
                    elem[p+'RequestFullscreen']()    //elem.msRequestFullscreen
                }
            };
            fs.exitFullScreen=function(){
                try{
                    p ? d[p+'ExitFullscreen']() : d.exitFullscreen()    //ie,新版chrome或标准
                }catch(e){
                    d[p+'CancelFullScreen']()    //老版chrome 火狐
                }
            }
        }
        w.fs=fs
    }(window,document);
 
使用方法:
 
 
<body>
        <div id="launch">进入全屏</div>
</body>
 
    var oBtn=document.getElementById('launch');
    oBtn.onclick=function(){
        if(fs.supportsFullScreen){
            fs.isFullScreen ?
            (fs.exitFullScreen(), this.innerHTML='进入全屏') :
            (fs.requestFullScreen(), this.innerHTML='退出全屏')
        }else{
            alert('Sorry: Your browser does not support fullScreen preview.')
        }
    };
    
    fs.fullscreenchange(function(){
        oBtn.innerHTML = fs.isFullScreen ? '退出全屏' : '进入全屏'
    })    
Tag:
上一篇:HTML5学习笔记
下一篇:HTML初识
网友评论

<