HTML5实现全屏

现在主流的浏览器都支持全屏,但是各家实现不一。下面是主流浏览器实现方法:

// W3C 提议
element.requestFullscreen();
element.exitFullscreen();

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
element.webkitCancelFullScreen();
 
// Firefox 10+
element.mozRequestFullScreen();
element.mozCancelFullScreen();

实际使用的时候我们需要做兼容,可以用函数包装起来:

//进入全屏
function requestFullScreen(element) {
    var de = document.querySelector(element) || document.documentElement;
    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
    }
}
//退出全屏
function exitFullscreen(element) {
    var de = document.querySelector(element) || document.documentElement;
    if (de.exitFullscreen) {
        de.exitFullscreen();
    } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
    } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
    }
}

封装后兼容主流浏览器用法,且支持某个指定的元素全屏,支持class、id查询。默认是对整个网页全屏。

调用方法:

requestFullScreen();
requestFullScreen('body');
requestFullScreen('#main');

可能出于安全考虑,只能手动触发才能实现全屏,浏览器自动执行无效果。通过控制台可以看到提示:API can only be initiated by a user gesture。

HTML5全屏API 相对比较简单,但是浏览器的差异性导致很丑的代码,并且不能保证它们不会再改变。如果你不想自己维护代码,你可以使用screenfull.js 这样的类库,它可以平滑过渡这些差异。

参考:
1、HTML5实现全屏API【进入和退出全屏】 - kingwell - 博客园
http://www.cnblogs.com/kingwell/p/3706352.html
2、How to Use HTML5 FUll Screen API(如何使用HTML5全屏接口) - 微个日光日 - 博客频道 - CSDN.NET
http://blog.csdn.net/xiebaochun/article/details/40143025
3、sindresorhus/screenfull.js: Simple wrapper for cross-browser usage of the JavaScript Fullscreen API
https://github.com/sindresorhus/screenfull.js/

posted @ 2017-03-14 21:22 飞鸿影 阅读(...) 评论(...) 编辑 收藏