一、简介
浏览器全屏有两种方式，一种是HTML5新增的requestFullscreen全屏，另一种是摁F11实现的全屏，本文将详解两种全屏的特点以及其实现。
二、requestFullscreen全屏
1、判断是否支持全屏
通过判断元素的requestFullscreen函数是否存在与document.fullscreenEnabled是否为True判断浏览器是否支持全屏或启用全屏，兼容写法为
1 function supportfull(){ 2 var requestFullscreen = 3 document.body.requestFullscreen || 4 document.body.webkitRequestFullscreen || 5 document.body.mozRequestFullScreen || 6 document.body.msRequestFullscreen; 7 var fullscreenEnabled = 8 document.fullscreenEnabled || 9 document.mozFullScreenEnabled ||10 document.webkitFullscreenEnabled ||11 document.msFullscreenEnabled;12 return !!(requestFullscreen && fullscreenEnabled);13 } 注意，requestFullscreen方法不存在于document对象上，并且注意字母s的大小写
2、进入全屏
通过调用元素的requestFullscreen方法使元素进入全屏，使用时应注意：
（1）requestFullscreen在document对象上没有定义。
（2）requestFullscreen方法只能由用户操作触发（如onclick事件），在onload事件中调用此方法将无效。
（3）当一个元素全屏时，再让其子元素全屏是无效的，必须先退出全屏。
（4）返回或跳转页面将退出全屏。
（5）进入全屏的元素其父元素将不再是全屏之前的父元素，此时之前的css可能失效，:full-screen伪类可以为元素添加全屏时的样式（使用时为了兼容请加-webkit、-moz或-ms前缀）。
下面给出，进入全屏的JS代码的兼容写法：
1 function full(el) { 2 if (el.requestFullscreen) { 3 el.requestFullscreen(); 4 } else if (el.mozRequestFullScreen) { 5 el.mozRequestFullScreen(); 6 } else if (el.webkitRequestFullscreen) { 7 el.webkitRequestFullscreen(); 8 } else if (el.msRequestFullscreen) { 9 el.msRequestFullscreen();10 }11 }
3、获取当前进入全屏的而元素
通过document.fullscreenElement方法获取当前全屏的元素，假设id为div1的Element当前为全屏状态则 document.querySelector("#div1")===document.fullscreenElement，以下是获取当前全屏元素的兼容写法：
1 function fullele() {2 return(3 document.fullscreenElement ||4 document.webkitFullscreenElement ||5 document.msFullscreenElement ||6 document.mozFullScreenElement ||7 null);8 } 4、判断当前是否全屏
通过document.fullscreenElement属性是否为空来判断，对于webkit内核的浏览器，还可以通过document.webkitIsFullScreen属性来判断，以下为兼容写法：
1 function isfull() {2 return !!(document.webkitIsFullScreen || fullele());3 }
5、退出全屏
通过document.exitFullscreen方法来退出全屏，对于不同内核的浏览器，方法名除了前缀不一样外，其他地方也不一样，以下为兼容写法
1 function exitfull() { 2 if (document.exitFullscreen) { 3 document.exitFullscreen(); 4 } 5 else if (document.mozCancelFullScreen) { 6 document.mozCancelFullScreen(); 7 } 8 else if (document.webkitExitFullscreen) { 9 document.webkitExitFullscreen();10 }11 else if (document.msExitFullscreen) {12 document.msExitFullscreen();13 }14 } 6、jQuery拓展，写成jQuery拓展，调用将十分方便，下面将给出一个实现：
1 $.extend({ 2 supportfull: function () { 3 var requestFullscreen = 4 document.body.requestFullscreen || 5 document.body.webkitRequestFullscreen || 6 document.body.mozRequestFullScreen || 7 document.body.msRequestFullscreen; 8 var fullscreenEnabled = 9 document.fullscreenEnabled || 10 document.mozFullScreenEnabled || 11 document.webkitFullscreenEnabled || 12 document.msFullscreenEnabled; 13 return !!(requestFullscreen && fullscreenEnabled); 14 }, 15 //获取当前全屏的元素 16 fullele: function () { 17 return( 18 document.fullscreenElement || 19 document.webkitFullscreenElement || 20 document.msFullscreenElement || 21 document.mozFullScreenElement || 22 null); 23 }, 24 //全屏，如果当前存在已经全屏的元素，则操作无效 25 full: function (el) { 26 if ($.isfull()) { 27 if (el === $.fullele()) { 28 return; 29 } 30 } 31 if (el.requestFullscreen) { 32 el.requestFullscreen(); 33 } else if (el.mozRequestFullScreen) { 34 el.mozRequestFullScreen(); 35 } else if (el.webkitRequestFullscreen) { 36 el.webkitRequestFullscreen(); 37 } else if (el.msRequestFullscreen) { 38 el.msRequestFullscreen(); 39 } 40 return this; 41 }, 42 //退出全屏 43 exitfull: function () { 44 if (document.exitFullscreen) { 45 document.exitFullscreen(); 46 } 47 else if (document.mozCancelFullScreen) { 48 document.mozCancelFullScreen(); 49 } 50 else if (document.webkitExitFullscreen) { 51 document.webkitExitFullscreen(); 52 } 53 else if (document.msExitFullscreen) { 54 document.msExitFullscreen(); 55 } 56 return this; 57 }, 58 //是否全屏 59 isfull: function () { 60 return !!(document.webkitIsFullScreen || $.fullele()); 61 }, 62 //进入或取消全屏，如果当前全屏的元素不是指定的元素，则取消全屏无效 63 togglefull: function (el, callback) { 64 if ($.isfull()) { 65 var fullele = $.fullele(); 66 if (el === fullele) { 67 $.exitfull(); 68 } 69 return; 70 } 71 $.full(el); 72 if (typeof callback == typeof $.noop) { 73 callback(!$.isfull()); 74 } 75 return this; 76 } 77 }) 78 $.fn.extend( 79 { 80 // 让匹配的第一个元素全屏 81 // 该方法应有用户操作触发，否则无效 82 full: function () { 83 if ($(this).length == 0) 84 return; 85 $.full($(this).get(0)); 86 return this; 87 }, 88 // 如果当前全屏的元素存在于匹配的元素集合中，则该元素会退出全屏 89 exitfull: function () { 90 if (isfull()) { 91 var fullel = $.fullel(); 92 var index = $(this).index(fullel); 93 if (index != -1) { 94 $.exitfull(); 95 } 96 } 97 return this; 98 }, 99 // 该方法应由用户操作触发，只对匹配的第一个元素有效100 togglefull: function (callback) {101 if ($(this).length > 0) {102 var el = $(this).first().get(0);103 $.togglefull(el, callback);104 }105 return this;106 },107 // 为元素绑定点击事件，以使点击的元素进入或退出全屏108 fullable: function (callback) {109 $(this).on("click", function (e) {110 $(this).togglefull(callback);111 });112 return this;113 },114 }); 二、F11全屏
1、未完待续。。。