仓库源文，站点原文

title: 让你的页面瞬间全屏 categories:

• JavaScript
• 前端杂烩 tags:
• tech
• cnblogs warning: true date: 2014-03-01 03:11:00 fromUrl: http://www.cnblogs.com/hustskyking/archive/2014/03/01/javascript-fullscreen.html from: 博客园

// 进入全屏
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>

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>

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);