用Html5 or JS实现点击一个按钮达到浏览器全屏效果

点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果

项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支持

全屏 

var docElm = document.documentElement;

//W3C 

if (docElm.requestFullscreen) { 

  docElm.requestFullscreen(); 

}

//FireFox 

else if (docElm.mozRequestFullScreen) { 

  docElm.mozRequestFullScreen(); 

}

//Chrome等 

else if (docElm.webkitRequestFullScreen) { 

  docElm.webkitRequestFullScreen(); 

}

//IE11

else if (elem.msRequestFullscreen) {

 elem.msRequestFullscreen();

}

退出全屏 

 if (document.exitFullscreen) { 
document.exitFullscreen(); 
} 
else if (document.mozCancelFullScreen) { 
document.mozCancelFullScreen(); 
} 
else if (document.webkitCancelFullScreen) { 
document.webkitCancelFullScreen(); 
} 
else if (document.msExitFullscreen) { 
document.msExitFullscreen(); 
} 

事件监听

document.addEventListener("fullscreenchange", function () { 
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";}, false); 

document.addEventListener("mozfullscreenchange", function () { 
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";}, false); 

document.addEventListener("webkitfullscreenchange", function () { 
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";}, false); 
document.addEventListener("msfullscreenchange", function () { 
fullscreenState.innerHTML = (document.msFullscreenElement)? "" : "not ";}, false); 

全屏样式设置 

在浏览器全屏的使用我们还可以进行样式设置 

html:-moz-full-screen { 
background: red; 
} 

html:-webkit-full-screen { 
background: red; 
} 

html:fullscreen { 
background: red; 
} 

在手机等移动设备上，很多内置的浏览器会缩放页面，为了是页面全屏无缩放，需要在页面的head部分加如下代码：

附录

1 一个在线的Demo

    http://robnyman.github.io/fullscreen/

2   HTML5全屏API之网络钓鱼

      http://www.36ria.com/5807

3   jquery封装的全屏插件

     http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

4  更加详细的全屏API介绍

    4.1 https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

    4.2  https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

5  HTML5全屏API在FireFox/Chrome中的显示差异

   http://www.zhangxinxu.com/wordpress/2012/10/html5-full-screen-api-firefox-chrome-difference/

浏览器全屏的JS代码实现

方法一：该方法是从一个网上的效果看到不错，然后自己就拿来下来实验了一下，还是比较满意度，下面直接给出代码

    
    
    
    
 
 


    
    
    

    
正在加载...
    



 

上面的代码很简单，功能主要是在head中的script脚本代码---并且是经过我格式化后的代码，在body中的代码只是去调用。

说明：没有实验成功在页面打开的时候就直接全屏，不知道为什么必须要绑定到某个对象的onclick事件上来调用？

下面的是最开始未格式化的代码，应该是压缩过的

 具体怎么用，你就自己斟酌使用

参考出处：http://liumeijun.com/

================================================================================

方法二：

 这个方法和方法一很类似，也是我从网上找来的，用来一下效果也还不错。

js控制页面的全屏展示和退出全屏显示

js控制页面的全屏展示和退出全屏显示
js控制页面的退出全屏显示

 说明：没有实验成功在页面打开的时候就直接全屏，不知道为什么必须要绑定到某个对象的onclick事件上来调用？

参考出处：

http://www.jb51.net/article/61940.htm

http://www.jb51.net/article/47038.htm

http://www.2cto.com/kf/201410/346205.html

================================================================================

方法三：这个方法有点牵强，我感觉其实就是指的最大化，你自己可以试试代码，并且我都做了一些说明

 

这个网页特代码实现了浏览器的最大化完全全屏

关闭方法： 按键盘 alt+f4  不过对于火狐浏览器不能完全全仍然显示地址栏和关闭按钮。 
O(∩_∩)O哈哈~

网上有很多人说要将第三中方式的方法写到body的onload事件中可以实现页面在载人的时候就显示最大化 ：如

我测试下来是有点问题的： 

①：window.open(document.location, '', 'fullscreen')在该方法的第二个参数如果为空，在body的onload事件中是一个open指定页面的死循环的调用打开，也就是说会无限制的打开一个新的窗口，你可以自己测试，注意你的任务管理器的性能选项卡中CPU的变化。

②：如果给出window.open方法的第二个参数，例如：window.open(document.location, 'aaa', 'fullscreen')，则在body的onload事件中调用的的时候也是死循环，只是都是同一个页面窗口而已，你可以自己测试，注意你的任务管理器的性能选项卡中CPU的变化。

 

以上出现的问题，希望有兴趣的朋友自己研究下，并告诉我最好的解决方案

参考出处：

http://blog.sina.com.cn/s/blog_4f8f56850100c0ig.html

http://fluagen.blog.51cto.com/146595/186101

http://www.51xuediannao.com/js/texiao/IEquanping.html

============================================================