requestFullscreen各种浏览器全屏模式的兼容方法记录和在TV项目的应用

启动全屏

浏览器全屏模式的启动函数requestFullscreen，需要附带各浏览器的js方言前缀：

// 判断各种浏览器，找到正确的方法
function launchFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("Element")); // 某个页面元素

 

退出全屏模式

exitFullscreen方法需要加浏览器前缀会让浏览器退出全屏模式，变成正常模式。需要注意的是，exitFullscreen只能由document对象调用，而不是启动全屏时传入的对象。

// 判断浏览器种类
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

// 退出全屏模式!
exitFullscreen();

判断是否全屏状态中

//判断是否全屏状态中
function fullscreenEnable(){
    let isFullscreen = document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
    //注意：要在用户授权全屏后才能准确获取当前的状态
    if(isFullscreen){
        return true;
    }else{
        return false;
    }
}

 

全屏样式CSS

各种浏览器都提供了一个非常有用的全屏模式时的css样式规则：

:-webkit-full-screen {
  /* properties */
}
 
:-moz-full-screen {
  /* properties */
}
 
:-ms-fullscreen {
  /* properties */
}
 
:full-screen { /*pre-spec */
  /* properties */
}
 
:fullscreen { /* spec */
  /* properties */
}
 
/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}
 
/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

 

全屏事件在TradingView的应用

在TV里自带的全屏事件不包含自己定义的按钮事件，所以全屏按钮得自己实现。

在onChartReady方法中我们可以定义在图表的按钮。

thats.onChartReady(function() {

    createFullScreen();

}

const createFullScreen = () => {

   const buttonEvent = thats.createButton({align: "right"});

   const button = buttonEvent[0];

   button.title = 'on_off';

   button.className = 'button fullscreen iconed apply-common-tooltip';

   buttonEvent.append('<span class="icon-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 586.09999 586.09996" width="18" height="18" enable-background="new 0 0 595.3 841.9"><path d="M172.6 367.9l-97.7 97.7L0 390.7v195.4h195.4l-74.9-74.9 97.7-97.7-45.6-45.6zM195.4 0H0v195.4l74.9-74.9 97.7 97.7 45.6-45.6-97.7-97.7L195.4 0zm195.3 0l74.9 74.9-97.7 97.7 45.6 45.6 97.7-97.7 74.9 74.9V0H390.7zm22.8 367.9l-45.6 45.6 97.7 97.7-74.9 74.9h195.4V390.7l-74.9 74.9-97.7-97.7z"></path></svg></span>'); //图片地址

  button.onclick = function() {

       const tvid = thats;

       if (fullscreenEnable()) {

            tvid.className = '';

            exitFullScreen();

            return;
       }

      tvid.className = 'tv_chart_container_full';

      // 启动全屏!
      launchFullScreen(document.getElementById("tv_chart_container")); // 某个页面元素

   }
}


// 判断各种浏览器，找到正确的方法
const launchFullScreen = function(element) {

     if(element.requestFullscreen) {

           element.requestFullscreen();

     } else if(element.mozRequestFullScreen) {

           element.mozRequestFullScreen();

     } else if(element.webkitRequestFullscreen) {

            element.webkitRequestFullscreen();

     } else if(element.msRequestFullscreen) {

            element.msRequestFullscreen();

     }

}


// 判断浏览器种类
const exitFullScreen = function() {

    if(document.exitFullscreen) {

          document.exitFullscreen();

    } else if(document.mozCancelFullScreen) {

          document.mozCancelFullScreen();

    } else if(document.webkitExitFullscreen) {

         document.webkitExitFullscreen();

    }
}


//判断是否全屏状态中
const fullscreenEnable = function (){

    let isFullscreen = document.fullscreenEnabled ||
          window.fullScreen ||
          document.webkitIsFullScreen ||
          document.msFullscreenEnabled;

    //注意：要在用户授权全屏后才能准确获取当前的状态
     if(isFullscreen){

          return true;

     }else{

          return false;

     }
}

 

参考文章：

https://blog.csdn.net/u011034081/article/details/45222651