introduce:
This article will introduce how to achieve full screen by clicking the button, which can make the user more focused on the page and block the interference outside the page.
HTML code
<div @click="fullScreen">全屏</div>
<div id="table">我是需要全屏的内容</div>
JavaScript code
Click to trigger full screen event
fullScreen() {
const tableBox = document.getElementById("table");
tableBox && (tableBox.style.overflow = 'auto');
this.launchFullscreen(tableBox);
}
open full screen
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;
}
}
Exit Full Screen
Click the [esc] button to exit full screen~
------------- The End -------------
License Agreement: For reprinting, please keep the original link and author.