萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 利用浏覽器全屏api實現js全屏

利用浏覽器全屏api實現js全屏

這篇文章主要介紹了利用浏覽器全屏api實現js全屏的代碼示例,示例中使用了jquery,把這個庫的地址改成自己的,大家參考使用吧

代碼如下:

(function () {

 var fullScreenApi = {

  supportsFullScreen : false,

  isFullScreen : function () {

   return false;

  },

  requestFullScreen : function () {},

  cancelFullScreen : function () {},

  fullScreenEventName : '',

  prefix : ''

 },

 browserPrefixes = 'webkit moz o ms khtml'.split(' ');

 

 // check for native support

 if (typeof document.cancelFullScreen != 'undefined') {

  fullScreenApi.supportsFullScreen = true;

 } else {

  // check for fullscreen support by vendor prefix

  for (var i = 0, il = browserPrefixes.length; i < il; i++) {

   fullScreenApi.prefix = browserPrefixes[i];

 

   if (typeof document[fullScreenApi.prefix + 'CancelFullScreen'] != 'undefined') {

    fullScreenApi.supportsFullScreen = true;

 

    break;

   }

  }

 }

 

 // update methods to do something useful

 if (fullScreenApi.supportsFullScreen) {

  fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';

 

  fullScreenApi.isFullScreen = function () {

   switch (this.prefix) {

   case '':

    return document.fullScreen;

   case 'webkit':

    return document.webkitIsFullScreen;

   default:

    return document[this.prefix + 'FullScreen'];

   }

  }

  fullScreenApi.requestFullScreen = function (el) {

   return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();

  }

  fullScreenApi.cancelFullScreen = function (el) {

   return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();

  }

 }

 

 // jQuery plugin

 if (typeof jQuery != 'undefined') {

  jQuery.fn.requestFullScreen = function () {

 

   return this.each(function () {

    if (fullScreenApi.supportsFullScreen) {

     fullScreenApi.requestFullScreen(this);

    }

   });

  };

 }

 

 // export api

 window.fullScreenApi = fullScreenApi;

})();

 

$(function(){

 $("#fullScreenBtn").click(function(){

  $("#fullScreen").requestFullScreen();

 });

 

 if(window.top != self){

  $("#tip").text("iframe裡面不能演示該功能!請點擊右下角的全屏查看!").show();

 }

});

 

if (!fullScreenApi.supportsFullScreen) {

 alert("您的破浏覽器不支持全屏API哦,請換高版本的chrome或者firebox!");

}

代碼如下:

<!DOCTYPE html>

<html>

 <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>javascript啟用全屏</title>

 

 <script id="jquery_183" type="text/javascript" class="library" src=jquery-1.8.3.min.js"></script>

 </head>

 <body>

  <button id="fullScreenBtn">點擊我進入全屏模式</button>

  <div id="fullScreen" class="fullScreen">

    <h1>

     我是全屏區域的內容!

   </h1>

   <div id="tip" style="display:none;">

 

   </div>

  </div>

 </body>

</html>

 代碼如下:

body{

background:#fff;

}

button{

 border:1px solid #ccc;

 cursor:pointer;

  display:block;

  margin:auto;

  position:relative;

  top:100px;

}

 

.fullScreen{

 padding-top:10%;

 text-align:center;

 background: none repeat scroll 0 0 #FFFFFF;

}

 

/* Mozilla proposal (dash) */

.fullScreen:full-screen {

    width:100%;

    height:100%;

}

 

/* W3C proposal (no dash) */

.fullScreen:fullscreen {

    width:100%;

    height:100%;

}

 

/* currently working vendor prefixes */

.fullScreen:-webkit-full-screen, .fullScreen:-moz-full-screen {

    width:100%;

    height:100%;

}

:-webkit-full-screen{

width:100%;

    height:100%;

}

copyright © 萬盛學電腦網 all rights reserved