1。
1 (function () { 2 var fullScreenApi = { 3 supportsFullScreen : false, 4 isFullScreen : function () { 5 return false; 6 }, 7 requestFullScreen : function () {}, 8 cancelFullScreen : function () {}, 9 fullScreenEventName : '', 10 prefix : '' 11 }, 12 browserPrefixes = 'webkit moz o ms khtml'.split(' '); 13 // check for native support 14 if (typeof document.cancelFullScreen != 'undefined') { 15 fullScreenApi.supportsFullScreen = true; 16 } else { 17 // check for fullscreen support by vendor prefix 18 for (var i = 0, il = browserPrefixes.length; i < il; i++) { 19 fullScreenApi.prefix = browserPrefixes[i]; 20 21 if (typeof document[fullScreenApi.prefix + 'CancelFullScreen'] != 'undefined') { 22 fullScreenApi.supportsFullScreen = true; 23 24 break; 25 } 26 } 27 } 28 29 // update methods to do something useful 30 if (fullScreenApi.supportsFullScreen) { 31 fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange'; 32 33 fullScreenApi.isFullScreen = function () { 34 switch (this.prefix) { 35 case '': 36 return document.fullScreen; 37 case 'webkit': 38 return document.webkitIsFullScreen; 39 default: 40 return document[this.prefix + 'FullScreen']; 41 } 42 } 43 fullScreenApi.requestFullScreen = function (el) { 44 return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen'](); 45 } 46 fullScreenApi.cancelFullScreen = function (el) { 47 return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen'](); 48 } 49 } 50 51 // jQuery plugin 52 if (typeof jQuery != 'undefined') { 53 jQuery.fn.requestFullScreen = function () { 54 55 return this.each(function () { 56 if (fullScreenApi.supportsFullScreen) { 57 fullScreenApi.requestFullScreen(this); 58 } 59 }); 60 }; 61 } 62 63 // export api 64 window.fullScreenApi = fullScreenApi; 65 })(); 66 67 $(function(){ 68 $("#fullScreenBtn").click(function(){ 69 $("#fullScreen").requestFullScreen(); 70 }); 71 72 if(window.top != self){ 73 $("#tip").text("iframe里面不能演示该功能!请点击右下角的全屏查看!").show(); 74 } 75 }); 76 77 if (!fullScreenApi.supportsFullScreen) { 78 alert("您的破浏览器不支持全屏API哦,请换高版本的chrome或者firebox!"); 79 }
2.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>javascript启用全屏</title> 6 7 <script id="jquery_183" type="text/javascript" class="library" src=jquery-1.8.3.min.js"></script> 8 </head> 9 <body> 10 <button id="fullScreenBtn">点击我进入全屏模式</button> 11 <div id="fullScreen" class="fullScreen"> 12 <h1> 13 我是全屏区域的内容! 14 </h1> 15 <div id="tip" style="display:none;"> 16 17 </div> 18 </div> 19 </body> 20 </html>
3.
1 body{ 2 background:#fff; 3 } 4 button{ 5 border:1px solid #ccc; 6 cursor:pointer; 7 display:block; 8 margin:auto; 9 position:relative; 10 top:100px; 11 } 12 .fullScreen{ 13 padding-top:10%; 14 text-align:center; 15 background: none repeat scroll 0 0 #FFFFFF; 16 } 17 18 /* Mozilla proposal (dash) */ 19 .fullScreen:full-screen { 20 width:100%; 21 height:100%; 22 } 23 24 /* W3C proposal (no dash) */ 25 .fullScreen:fullscreen { 26 width:100%; 27 height:100%; 28 } 29 30 /* currently working vendor prefixes */ 31 .fullScreen:-webkit-full-screen, .fullScreen:-moz-full-screen { 32 width:100%; 33 height:100%; 34 } 35 :-webkit-full-screen{ 36 width:100%; 37 height:100%; 38 }