Open a popup and fullscreen window

Posted on August 12, 2020

To open a popup window, you need an explicit user action, such as:

<button onclick="openWin()">Open</button>
let ref = window.open(`external.html`, 'Screen', `top=0,left=0,width=960,height=560,menubar=no,location=no,resizable=yes,scrollbars=no,status=no`)
ref.focus()

To run as fullscreen, within the external.html file you can add:

// from MDN
function toggleFullScreen(){
    if (!document.mozFullScreen && !document.webkitFullScreen) {
        if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen()
        } else {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
        }
    } else {
        if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen()
        } else {
            document.webkitCancelFullScreen()
        }
    }
}

document.addEventListener('keyup', e => {
    if(e.key === 'Enter'){
        toggleFullScreen()
    }
})