瀏覽器全屏外掛screenfull.js與全屏狀態監聽
專案中有一個需求:是系統需要全屏,且全屏狀態下頂部的內容和非全屏下的內容不一樣。開始幹活
- 專案使用的是vue,需要全屏外掛,上網找了一個screenfull.js,安裝上再說
$ npm install --save screenfull
- 安裝好後,引入專案,試了一下可以全屏,我用的chrome,IE9以下不要考慮,第一步完成
- 第二布,需要監控全屏狀態,但是試了一下,isFullscreen的狀態在全屏之後是true,ESC退出全屏之後狀態沒有改變,於是上網搜了一下。
瀏覽器故意不上監聽ESC鍵的,跟網頁載入完成之後不能用程式使瀏覽器全屏一樣的道理,避免開發者惡意全屏
解決辦法:
window.onresize = function(){
if(!checkFull()){
//要執行的動作
}
}
function checkFull(){
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
//to fix : false || undefined == undefined
if(isFull === undefined) isFull = false;
return isFull;
}
- ok,知道原因後,加到程式碼中,進行onresize監聽事件。
完整程式碼如下:
<template>
<div v-if='!isFullscreen'> 非全屏狀態</div>
<div v-if='isFullscreen'> 全屏狀態</div>
</template>
<script>
import screenfull from 'screenfull'
export default {
data () {
return {
isFullscreen: false
}
},
methods: {
/**
* 全屏事件
*/
screenfull() {
if (!screenfull.enabled) {
this.$message({
message: 'Your browser does not support!',
type: 'warning'
})
return false
}
screenfull.toggle();
this.isFullscreen = true;
},
/**
* 是否全屏並按鍵ESC鍵的方法
*/
checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
// to fix : false || undefined == undefined
if (isFull === undefined) {
isFull = false;
}
return isFull;
}
},
mounted() {
window.onresize = () => {
// 全屏下監控是否按鍵了ESC
if (!this.checkFull()) {
// 全屏下按鍵esc後要執行的動作
this.isFullscreen = false;
}
}
}
}
</script>
相關文章
- 瀏覽器全屏API瀏覽器API
- screenfull全屏外掛
- 瀏覽器的全屏功能小結瀏覽器
- Javascript開啟瀏覽器全屏模式JavaScript瀏覽器模式
- win10瀏覽器全屏怎麼設定_window10自帶瀏覽器怎麼全屏Win10瀏覽器
- Android全屏與透明狀態列Android
- javascript實現的控制瀏覽器全屏效果 [JavaScript瀏覽器
- win10瀏覽器開啟不是全屏怎麼辦_win10怎麼讓瀏覽器開啟就是全屏Win10瀏覽器
- 常用瀏覽器外掛瀏覽器
- 谷歌瀏覽器外掛-jsonView外掛谷歌瀏覽器JSONView
- 瀏覽器元素全屏api和在ie核心的部分相容瀏覽器API
- fullPage.js全屏滾動外掛APIJSAPI
- vuex狀態管理與瀏覽器快取Vue瀏覽器快取
- 用 ES6 寫全屏滾動外掛
- 監聽瀏覽器的後退事件瀏覽器事件
- IE瀏覽器外掛開發瀏覽器
- 好用的谷歌瀏覽器外掛谷歌瀏覽器
- UC瀏覽器外掛開發瀏覽器
- 跨瀏覽器外掛技術瀏覽器
- 各種瀏覽器全屏模式的方法、屬性和事件介紹瀏覽器模式事件
- 火狐瀏覽器看影片全屏時會黑一下螢幕瀏覽器
- win10瀏覽器怎麼加入外掛_win10瀏覽器外掛在哪設定Win10瀏覽器
- 瀏覽器外掛 network-plus瀏覽器
- Chrome瀏覽器實用外掛集合Chrome瀏覽器
- iTab瀏覽器外掛安裝教程瀏覽器
- ubuntu 安裝瀏覽器flash外掛Ubuntu瀏覽器
- 基於React的全屏滑動外掛react-fullslipReact
- 動態監聽與靜態監聽
- xStand for mac(安全的全屏網頁瀏覽器) v6.8.2啟用版Mac網頁瀏覽器
- win10瀏覽器外掛管理怎麼設定_win10瀏覽器如何載入外掛Win10瀏覽器
- 精選10款谷歌瀏覽器外掛武裝你的瀏覽器谷歌瀏覽器
- ORACLE動態監聽與靜態監聽Oracle
- 【oracle】動態監聽與靜態監聽Oracle
- tampermonkey外掛指令碼油猴外掛下載 - 篡改猴瀏覽器外掛指令碼瀏覽器
- 使用 ClojureScript 開發瀏覽器外掛的過程與收穫瀏覽器
- 安裝Google Chrome瀏覽器及常用外掛GoChrome瀏覽器
- Tampermonkey for Mac油猴Safari瀏覽器外掛Mac瀏覽器
- chrome瀏覽器 json外掛【WEB前端助手】Chrome瀏覽器JSONWeb前端