让你的页面瞬间全屏
@update 文章下方有更新，提到了更多全屏的知识以及错误的矫正。
页面全屏是一个体验非常棒的功能，他可以让你的视觉焦点聚集在你想关注的元素块上。很多浏览器都支持全屏，按下 F11，哦了！ 页面全屏了~ 但是本文要说的并不是这种全屏。当页面中有个小 DEMO 或者小游戏要展示的时候，用户期望，这个 DEMO 或者游戏可以在全屏下展示，本文就教你如何来展示。
如果你是非 IE 浏览器进入的该页面，你可能已经看到了页面上发生了一点小变化，多个东西：
没错，多了个“进入全屏”的按钮，这就是本文要介绍的内容！
本文地址：http://www.cnblogs.com/hustskyking/p/javascript-fullscreen.html，转载请注明源地址。
一、全屏策略
1. 原理
一些浏览器提供了元素全屏的接口，这些接口的调用特别简单：
// 进入全屏 element.requestFullScreen(); // 退出全屏 document.exitFullscreen();
这是 w3c 规范统一的接口，但是浏览器总是那么调皮，内部实现的时候会加上自己厂商的前缀，如：
// 小狐 element.mozRequestFullScreen(); // Chrome document.webkitCancelFullScreen();
这里有两点需要引起注意，W3C 中的退出全屏是 exitFullscreen，而小狐跟 Chrome 使用的是 cancelFullScreen，这里在作判断的时候不要弄错了；再一点就是当我们退出全屏的时候，并不是使用 element 作为退出的对象了，而是使用 document。
2. 兼容处理
原理是很简单，但是针对浏览器的兼容性写起来还是挺麻烦的，幸好 Chrome 换用 blink内核 之后没有继续加上一个 -blink-，否则开发者心里会有无数个***奔腾的！
对于进入全屏：
function launchFullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
}对于退出全屏：
function cancelFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
} 3. 浏览器兼容性
IE 用户就甭看了，刚测试，IE11 不兼容（需要加前缀 ms）。对于浏览器的兼容情况，请戳这里。目前 Firefox 兼容，不过有点离谱。他会弹出一个让你全屏的提示，此时确实是全屏的，但当你点击提示中的“允许”时，屏幕又退出了全屏，真是让人匪夷所思。我测试的版本（27.0.1）有这个问题，当然，这是浏览器本身的问题，不用纠结。
Chrome 对于新特性的支持永远是站在前排，不得不佩服 google 开发工程师的牛掰！
二、3 个 bug
1. window 失去焦点
当全屏一个元素块的时候，原始状态该元素块可能没有 padding 或者 margin 值，为了让他显示的稍微养眼一些，我们可能会给他主动加上 padding 值，然后在退出全屏的时候在拿到设置的值。但此时，一个 bug 出现鸟，当我们点击全屏页面中的 a 标签，或者触发了某个 window.open 之后，浏览器会失去焦点，跳到新开的页面中，而全屏的页面会退出全屏，搞笑的是我们开始设置的 padding 值他不给我们去掉，这个是令人十分神伤的，不过没关系，有 bug 咱们就打补丁！
window.onblur = function(){
cancelFullsreen();
changeThePadding();
};有人会想到，我们在点击 a 链接的时候先 changeThePadding()，再让 a 标签跳走，这种方式是不合理的，因为除了 a 链接会让页面失去焦点之外还有其他的可能（如 window.open）。
@update 因为 bug 3 的存在，这里不能这样改，需要利用浏览器的全屏探测：
$(document).on('webkitfullscreenchange mozfullscreenchange msfullscreenchange fullscreenchange', function(){
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement &&
!document.webkitFullscreenElement &&
!document.msFullscreenElement ) {
// 在这里处理 bug changeThePadding();
} });2. 一个貌似可以重现的 bug
所谓的可以重现就是，把代码逻辑抽离出来，写个 demo 还能看到 bug。反正我试过好几次，这个 bug 都出现了，懒得写一个 DEMO 重现他。他出现的位置是：我的滚动条是自己设置的样式，当全屏之后，滚动条本应该在页面的最右侧，但是我测试的时候他偶尔会离最右侧有十几个像素，我也不知道为什么。但是当我打开 DevTools 的时候，这十几个像素又奇妙的被缝合了~
后来一想，管你呢，这肯定是 google 的工程师没有留意到的位置！既然开打 DevTools 可以修复，那就说明触发 window.resize 也能解决这个问题，好吧，那就这样试试吧：
newCancelFullscreen = function(){
cancelFullscreen();
window.onresize();
};果然有效，bug 搞定！
3. 全屏之后，部分浏览器会在该页面失去焦点
这就相当于，全屏之后，触发了 window.blur();
三、小结
除了上面提到的两个 bug，还有一个值得注意的是，如果你全屏的那个元素块很高但却没有设置
element { overflow:auto; }之类的东西，你会发现滚烂你的鼠标也滚不出那块区域。
本文介绍了如何使用 javascript 将页面中的某个元素调至全屏，并指出了再使用过程中的两个 bug，希望引起注意！
四、参考资料
- http://baidufe.com/ Alien的笔记
@update 2014/03/01 12:00
\1. Trident 内核的 IE 浏览器是支持的，可以用 element.msRequestFullscreen()，退出用 msExitFullscreen()
\2. 对于全屏的元素可以使用伪元素给他加样式：
:-webkit-full-screen #myvideo {
width: 100%;
height: 100%;
}\3. 浏览器提供的两个方便开发的东西：
fullscreenElement：如果这个属性为空，则浏览器处于非全屏状态，否则就是处于全屏。
fullscreenEnabled：这个属性告诉你浏览器 document 是否可以全屏。
\4. 也可以使用 keydown 来控制全屏，如：
document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);对于 toggleFullScreen 函数：
Toggle FullScreen
\5. 全屏事件
看到这句代码你可能就懂了：
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange',fn);当全屏状态改变时会触发上面的 fullscreenchange 事件，所以 #15 p2227 给我提出的问题就可以得到解决了。
文章可能还存在错误的地方，还请多多斧正！
