快捷導(dǎo)航

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

更新時(shí)間：2023年12月20日 10:23:01 作者：長(zhǎng)歡愉

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

項(xiàng)目場(chǎng)景：

在進(jìn)入大屏頁(yè)面時(shí)，頁(yè)面自動(dòng)全屏展示

問(wè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();
    }
  }
}

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

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

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

原因分析：

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

解決方案：

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

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

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