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