JS全屏模式

記錄專案中遇到的全屏模式

全屏方法

我是在vue專案中使用這個功能，isFullScreen是全屏變數，用來判斷全屏需要進行的操作

開啟全屏

<script>
openFullScreen() {
	let docElm = document.getElementById("appConfigurable");
	if (docElm.requestFullscreen) {
		docElm.requestFullscreen();
	} //FireFox
	else if (docElm.mozRequestFullScreen) {
		docElm.mozRequestFullScreen();
	} //Chrome等
	else if (docElm.webkitRequestFullScreen) {
		docElm.webkitRequestFullScreen();
	} //IE11
	else if (docElm.msRequestFullscreen) {
		docElm.msRequestFullscreen();
	}
	this.isFullScreen = true;
},
</script>    
 

關閉全屏

<script>
cancelFullScreen() {
	if (document.exitFullscreen) {
		document.exitFullscreen();
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	} else if (document.webkitCancelFullScreen) {
		document.webkitCancelFullScreen();
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	}
	this.isFullScreen = false;
}
</script>    
 

檢查全屏

看到別人寫的有document.fullscreenEnabled，但是看到它一直是true註釋掉就能用，暫時註釋掉，整明白了再更新

<script>
checkFullScreen() {
	let isFull =
	// document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
	if (isFull === undefined) {
		isFull = false;
	}
	this.isFullScreen = isFull;
},
</script>    
 

呼叫檢查全屏

<script>
//onresize 事件會在視窗或框架被調整大小時發生。
mounted() {
	var _this = this;
	window.onresize = function() {
		_this.checkFullScreen();
	}
};
//用完銷燬下事件
destroyed() {
    window.onresize = null;
}
//其他寫法
window.addEventListener('resize', this.checkFullScreen);
window.removeEventListener("resize", this.checkFullScreen);//銷燬
</script>    

全屏遇到的影響element-ui的問題

在全屏模式下，element-ui的select下拉框不生效，在el-select上加:popper-append-to-body="false"

<el-select v-model="param.content[index].ds.redirectType" :popper-append-to-body="false">
</el-select>
element文件：popper-append-to-body: 是否將彈出框插入至 body 元素。在彈出框的定位出現問題時，可將該屬性設定為 false