I. Overview
When previewing reports on the browser, everyone can use F11 to make the report display in full screen, but for some screens for display purpose only, there is no keyboard and only the mouse can be used to interact with the report.
The effect is shown in the figure below. Click the body of the dashboard with the mouse to display the report in full screen; click again to restore to the original appearance:
Note: This document only describe the method for dashboard. If you want to achieve the same effect on normal report, please refer to Click Button to Display a Report in Full Screen.
II. Example
Open the template, select body, and add a Click event, as shown in the figure below:
The JS code is as follows:
var docElm = document.documentElement;
var explorer = window.navigator.userAgent.toLowerCase();
if(explorer.indexOf('chrome') > 0) { //webkit
if(document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
} else {
//W3C
if(docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if(docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome
else if(docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}
} else { //fireFox
if(window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
} else {
//W3C
if(docElm.requestFullscreen) {
docElm.requestFullscreen();
}
//FireFox
else if(docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
//Chrome
else if(docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}
}
Note: The above code is only suitable for browsers including Google Chrome, Firefox and 360.
III. Effect preview
Save the template and preview. The effect is as shown in the figure below:
Note: Mobile terminal is not supported.
