// 进入全屏
element.requestFullScreen();
// 退出全屏
document.exitFullscreen();
// 小狐
element.mozRequestFullScreen();
// Chrome
document.webkitCancelFullScreen();
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();
}
}
<h4>3. 浏览器兼容性</h4>
<p><span>IE 用户就甭看了，刚测试，IE11 不兼容</span>（需要加前缀 ms）。对于浏览器的兼容情况，请戳<a href="//developer.mozilla.org/en/DOM/Using_full-screen_mode#AutoCompatibilityTable" target="_blank">这里</a>。目前 Firefox 兼容，不过有点离谱。他会弹出一个让你全屏的提示，此时确实是全屏的，但当你点击提示中的\允许"时，屏幕又退出了全屏，真是让人匪夷所思。我测试的版本（27.0.1）有这个问题，当然，这是浏览器本身的问题，不用纠结。</p> <p><img src="https://images.cnitblog.com/i/387325/201403/010319363967428.png" alt="" width="553" height="195"></p> <p>Chrome 对于新特性的支持永远是站在前排，不得不佩服 google 开发工程师的牛掰！</p> <h3>二、3 个 bug</h3> <h4>1. window 失去焦点</h4> <p>当全屏一个元素块的时候，原始状态该元素块可能没有 padding 或者 margin 值，为了让他显示的稍微养眼一些，我们可能会给他主动加上 padding 值，然后在退出全屏的时候在拿到设置的值。但此时，一个 bug 出现鸟，当我们点击全屏页面中的 a 标签，或者触发了某个 <code>window.open</code> 之后，浏览器会失去焦点，跳到新开的页面中，而全屏的页面会退出全屏，搞笑的是我们开始设置的 padding 值他不给我们去掉，这个是令人十分神伤的，<span>不过没关系，有 bug 咱们就打补丁！</span></p>window.onblur = function(){
cancelFullsreen();
changeThePadding();
};
$(document).on('webkitfullscreenchange mozfullscreenchange msfullscreenchange fullscreenchange', function(){
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement &&
!document.webkitFullscreenElement &&
!document.msFullscreenElement ) {
// 在这里处理 bug changeThePadding();
} });
<h4>2. 一个貌似可以重现的 bug</h4>
<p>所谓的可以重现就是，把代码逻辑抽离出来，写个 demo 还能看到 bug。反正我试过好几次，这个 bug 都出现了，懒得写一个 DEMO 重现他。他出现的位置是：我的滚动条是自己设置的样式，当全屏之后，滚动条本应该在页面的最右侧，但是我测试的时候他偶尔会离最右侧有十几个像素，我也不知道为什么。但是当我打开 DevTools 的时候，这十几个像素又奇妙的被缝合了~</p> <p><img src="https://images.cnitblog.com/i/387325/201403/010322023845093.png" alt=""></p> <p>后来一想，管你呢，这肯定是 google 的工程师没有留意到的位置！既然开打 DevTools 可以修复，那就说明触发 window.resize 也能解决这个问题，好吧，那就这样试试吧：</p>newCancelFullscreen = function(){
cancelFullscreen();
window.onresize();
};
element { overflow:auto; }
:-webkit-full-screen #myvideo {
width: 100%;
height: 100%;
}
document.addEventListener("keydown", function(e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
Toggle FullScreen
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange',fn);