利用浏览器全屏api实现js全屏

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 }

 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>

 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 }

posted on 2018-01-08 16:37 Sharpest 阅读(320) 评论(0) 收藏举报