JS Click Dashboard to Display in Full Screen

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.

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.

Save the template and preview. The effect is as shown in the figure below:

Note: Mobile terminal is not supported.

Click Dashboard to Display in Full Screen.frm