js與vue如何實現(xiàn)自動全屏顯示效果

更新時間：2023年12月20日 10:23:01 作者：長歡愉

這篇文章主要給大家介紹了關(guān)于js與vue如何實現(xiàn)自動全屏顯示效果的相關(guān)資料,在vue項目中做一個可以控制頁面全屏展示的效果,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

項目場景：

在進(jìn)入大屏頁面時，頁面自動全屏展示

問題描述

如果只是單純的想要全屏效果，可使用如下代碼：

function fullscreenCheck() {
  if (!document.fullscreenElement &&
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

遇到的問題：
如果直接運行這個函數(shù)，會報錯，報錯原因大概為 瀏覽器全屏API只能由用戶手勢觸發(fā)；
而直接運行這個函數(shù)，相當(dāng)于通過代碼模擬點擊事件，仍然是 不可以 的，報錯和第一種情況一樣；如下：

TypeError: fullscreen error或
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture

曾嘗試通過控制鍵盤 F11 事件去讓頁面全屏，但同樣也是不可以的；

原因分析：

全屏 API 允許網(wǎng)頁以全屏的方式顯示在用戶的屏幕上，覆蓋了操作系統(tǒng)和其他應(yīng)用程序的界面。這樣的能力可能會被惡意的網(wǎng)站或應(yīng)用程序濫用，對用戶造成困擾，并帶來潛在的安全風(fēng)險。為了避免這種濫用和保護(hù)用戶的隱私，現(xiàn)代瀏覽器對全屏 API 進(jìn)行了限制，并要求必須由用戶手勢觸發(fā)。

解決方案：

方法1：
本人使用的方法：曉之以理，動之以情；告知產(chǎn)品經(jīng)理需求暫不可行，要求其更改產(chǎn)品需求。
最后將需求更改為：
用戶點擊屏幕任何地方即可全屏或退出全屏，這樣將本文上方全屏代碼更改為點擊事件，綁定到根元素上面即可
問題：
1、這樣需要大屏的點擊事件全部阻止冒泡
2、使用最多的echarts圖表阻止冒泡方法，代碼如下：

  // echarts渲染
  myChart.setOption(optionCarRide.value, true);
  // echarts阻止冒泡  
  document.getElementById('XXXXXX——Id').addEventListener('click',event => {
     event.stopPropagation();
  })

方法2：如果你的大屏是在同一個頁面切換顯示，或是點擊一個按鈕，大屏是打開新的頁面后顯示的。請注意
將你的全屏事件綁定在這個 “跳轉(zhuǎn)” 按鈕上面，并設(shè)置延時。這樣在打開新的頁面時，瀏覽器會認(rèn)為是用戶操作了全屏事件，依舊可以完成相對應(yīng)的偽全屏事件?？梢詽M足此類需求。