借助浏览器全屏api实现js全屏

发布时间：2023-09-21 14:40:47 所属栏目：教程来源：

导读：代码如下:

(function () {

var fullScreenApi = {

supportsFullScreen : false,

isFullScreen : function () {

return false;

},

requestFullScreen : function () {},

代码如下:

(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！");

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!