JS-指定DOM点击全屏事件

介绍：

本文将介绍通过点击按钮实现全屏，这样可以使得用户在该页面更加专注，屏蔽掉该页面之外的干扰。

HTLM代码

<div @click="fullScreen">全屏</div>
<div id="table">我是需要全屏的内容</div>

JS代码

点击触发全屏事件

fullScreen() {
    
    
	const tableBox = document.getElementById("table");
	tableBox && (tableBox.style.overflow = 'auto');
  this.launchFullscreen(tableBox);
}

开启全屏

launchFullscreen(element) {
    
    
	if(element.requestFullscreen) {
    
    
		element.requestFullscreen();
	} else if(element.mozRequestFullScreen) {
    
    
		element.mozRequestFullScreen();
	} else if(element.msRequestFullscreen) {
    
    
		element.msRequestFullscreen();
	} else if(element.oRequestFullscreen) {
    
    
		element.oRequestFullscreen();
	} else if(element.webkitRequestFullscreen) {
    
    
		element.webkitRequestFullScreen();
	} else {
    
    
		const docHtml = document.documentElement;
		const docBody = document.body;
		const width = window.screen.width;
		const height = window.screen.height;
		const cssText = "width:" + width + ";height:" + height + ";overflow:hidden;";
		docHtml.style.cssText = cssText;
		docBody.style.cssText = cssText;
	}
}

退出全屏

点击【esc】按键即可退出全屏~

------------- The End -------------

许可协议: 转载请保留原文链接及作者。