HTML5实现全屏

2018/04/24 13:26
阅读数 13

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

// 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/

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部