参考
- http://www.cnblogs.com/minghui007/p/5601194.html
- http://www.cnblogs.com/lfqcode/p/6164001.html
fullscreen API 接口
属性1：fullscreenElement，该属性返回当前处于全屏模式的DOM元素。
属性2：fullscreenEnabled，该属性返回当前 document 是否进入了可以请求全屏模式的状态。
方法1：requestFullscreen()，请求进入全屏模式。
方法2：exitFullscreen()，退出全屏模式。
事件1：fullscreenchange，进入/退出全屏模式切换时会触发。
事件2：fullscreenerror，进入/退出全屏模式失败时会触发。
由于fullscreen API 存在浏览器兼容性问题，所以我们在使用的时候需要进行跨浏览器处理
跨浏览器返回正处于全屏的元素
function fullscreenElement() { var fullscreenEle = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; //注意：要在用户授权全屏后才能获取全屏的元素，否则 fullscreenEle为null console.log("全屏元素：" + fullscreenEle); return fullscreenEle; }跨浏览器返回当前 document 是否进入了可以请求全屏模式的状态
function fullscreenEnable() { var isFullscreen = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled; //注意：要在用户授权全屏后才能准确获取当前的状态 if (isFullscreen) { console.log('全屏模式'); } else { console.log('非全屏模式'); } }跨浏览器发动全屏
function lanchFullscreen(element) {
if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullScreen(); } }跨浏览器退出全屏
function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExiFullscreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } }各浏览器fullscreenchange 事件处理
document.addEventListener('fullscreenchange', function(){
/*code*/ }); document.addEventListener('webkitfullscreenchange', function(){
/*code*/}); document.addEventListener('mozfullscreenchange', function(){
/*code*/}); document.addEventListener('MSFullscreenChange', function(){
/*code*/});各浏览器fullscreenerror 事件处理
document.addEventListener('fullscreenerror', function(){
/*code*/ }); document.addEventListener('webkitfullscreenerror', function(){
/*code*/}); document.addEventListener('mozfullscreenerror', function(){
/*code*/); document.addEventListener('MSFullscreenError', function(){
/*code*/ });跨浏览器全屏模式下样式代码
:-webkit-full-screen { } :-moz-full-screen { } :-ms-fullscreen { } :fullscreen { }实例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Full-screen</title> <script SRC="../lib/jquery.min.js"></script> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } .container { width: 100%; height: 100%; background: grey; display: flex; justify-content: center; align-items: center; } :-webkit-full-screen .container { background: red; } .btn { width: 300px; height: 30px; font-size: 16px; } </style> </head> <body> <div class="container"> <button id="btn" class="btn">click</button> </div> <script> var button = document.getElementById('btn'); // 进入全屏 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.mozExitFullScreen) { document.mozExitFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } button.onclick = function () {
var isFullScreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;// 判断是否全屏 if (!isFullScreen) { launchFullScreen(document.documentElement); // 整个页面全屏 // launchFullScreen(document.getElementById("btn")); // 某个元素全屏 } else { exitFullScreen(); } var fullScreenElement = document.fullscreenEnabled || document.mozFullscreenElement || document.webkitFullscreenElement; // 当前处于全屏状态的元素 element. var fullScreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled; // 标记 fullScreen 当前是否可用. console.log(fullScreenElement); console.log(fullScreenEnabled) }; document.addEventListener('fullscreenchange', function () {
alert(123) }); document.addEventListener('webkitfullscreenchange', function () {
alert(123) }); document.addEventListener('mozfullscreenchange', function () {
alert(123) }); document.addEventListener('MSFullscreenChange', function () {
alert(123) }); </script> </body> </html>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/230355.html原文链接：https://javaforall.net
