html5 js 實現瀏覽器全屏效果（F11）

1. <input id="Button1" type="button" value="開始全屏" onclick="kaishi()" />
2. <input id="Button2" type="button" value="關閉全屏" onclick="guanbi()" />
4. <script>
5. function kaishi()
6. {
9. var docElm = document.documentElement;
10. //W3C
11. if (docElm.requestFullscreen) {
12. docElm.requestFullscreen();
13. }
14. //FireFox
15. else if (docElm.mozRequestFullScreen) {
16. docElm.mozRequestFullScreen();
17. }
18. //Chrome等
19. else if (docElm.webkitRequestFullScreen) {
20. docElm.webkitRequestFullScreen();
21. }
22. //IE11
23. else if (elem.msRequestFullscreen) {
24. elem.msRequestFullscreen();
25. }
26. }
28. function guanbi() {
31. if (document.exitFullscreen) {
32. document.exitFullscreen();
33. }
34. else if (document.mozCancelFullScreen) {
35. document.mozCancelFullScreen();
36. }
37. else if (document.webkitCancelFullScreen) {
38. document.webkitCancelFullScreen();
39. }
40. else if (document.msExitFullscreen) {
41. document.msExitFullscreen();
42. }
43. }
48. document.addEventListener("fullscreenchange", function () {
50. fullscreenState.innerHTML = (document.fullscreen) ? "" : "not ";
51. }, false);
55. document.addEventListener("mozfullscreenchange", function () {
57. fullscreenState.innerHTML = (document.mozFullScreen) ? "" : "not ";
58. }, false);
62. document.addEventListener("webkitfullscreenchange", function () {
64. fullscreenState.innerHTML = (document.webkitIsFullScreen) ? "" : "not ";
65. }, false);
67. document.addEventListener("msfullscreenchange", function () {
69. fullscreenState.innerHTML = (document.msFullscreenElement) ? "" : "not ";
70. }, false);
71. 
    

跨瀏覽器全屏模式下樣式代碼

:-webkit-full-screen { }

:-moz-full-screen { }

:-ms-fullscreen { }

:fullscreen { }