介绍:
本文将介绍通过点击按钮实现全屏,这样可以使得用户在该页面更加专注,屏蔽掉该页面之外的干扰。
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 -------------
许可协议: 转载请保留原文链接及作者。