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

前端技术 2023/09/01 JavaScript

复制代码 代码如下:

(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!\");
}

本文地址:https://www.stayed.cn/item/1202

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。