Enter and Exit Browser Fullscreen Mode

Most browsers have implemented the fullscreen feature for web pages and provide keyboard shortcuts, usually F11 and Esc keys. In addition to keyboard shortcuts, W3C has also defined two APIs for fullscreen. With these APIs, we can control the fullscreen display of web pages using JavaScript.

Fullscreen API

In the W3C standard, the methods are as follows:

Enter fullscreen: Element.requestFullscreen (opens new window)

Exit fullscreen: Document.exitFullscreen (opens new window)

Element in current fullscreen mode: Document.fullscreenElement (opens new window)

However, the methods required to be used in some versions of browsers are different. Refer to the table below:

Feature	webkit	Gecko(Firefox)	IE11
Enter fullscreen	webkitRequestFullScreen	mozRequestFullScreen	msRequestFullScreen
Exit fullscreen	webkitExitFullscreen	mozCancelFullScreen	msExitFullscreen
Element in current fullscreen mode	webkitFullscreenElement or (webkitCurrentFullScreenElement, mobile safari)	mozFullScreenElement	msFullscreenElement

Although W3C has defined the standard for the fullscreen API, it is not well supported in various browsers. Therefore, it is necessary to perform compatibility processing when using it.

Compatibility Encapsulation

1. Enter fullscreen

   function requestFullscreen() {
       const html = document.documentElement;
       const rfs = html.requestFullscreen || html.mozRequestFullScreen || html.webkitRequestFullScreen || html.msRequestFullscreen;
       return rfs.call(html);
   }
   

2. Exit fullscreen

   function exitFullscreen() {
       const efs = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
       return efs.call(document);
   }
   

3. Get the element in current fullscreen mode

   function getFullscreenElement() {
       return document.fullscreenElement || document.webkitFullscreenElement || document.webkitCurrentFullScreenElement || document.mozFullScreenElement || document.msFullscreenElement;
   }
   

Check if it is in fullscreen mode

Since the Document.fullscreen (opens new window) property has been deprecated, according to the MDN documentation, we can determine if it is in fullscreen mode by checking if Document.fullscreenElement is equal to null.

function isFullscreen() {
    return getFullscreenElement() !== null;
}

However, according to can I use (opens new window), although fullscreenElement can be obtained with different prefixes, its compatibility is still not satisfactory. In scenarios with higher compatibility requirements, the Screen API (opens new window) can be used as an additional means to determine if it is in fullscreen mode.

function isFullscreen() {
    const fullscreenElement = getFullscreenElement();
    if (fullscreenElement === undefined) {
        return window.innerWidth === screen.availWidth && window.innerHeight === screen.availHeight;
    }
    return fullscreenElement !== null;
}

Event Listening

After entering and exiting fullscreen mode, the browser will trigger the fullscreenchange (opens new window) event. Related non-standard events include:

• webkitfullscreenchange
• mozfullscreenchange
• MSFullscreenChange

According to the information provided on can I use (opens new window), the compatibility of the fullscreenchange event is not very good. For improved compatibility across various browsers and devices, Foxit PDF SDK for Web offers the UIEvents.fullscreenchange (opens new window) event.

Here's an example of how to listen for the fullscreenchange event using the addUIEventListener function provided by the PDFUI library:

pdfui.addUIEventListener(UIExtension.UIEvents.fullscreenchange, isFullscreen => {
    // do something here
})

Note that before using the UIEvents.fullscreenchange event, you need to make sure that the full-screen addon is loaded during the PDFUI initialization, or use AllInOne.js or AllInOne.mobile.js. For more details, please refer to the Addon Introduction section.

Alternatively, you can choose not to use the provided event and instead use the resize event to achieve the same result as fullscreenchange. The specific approach is as follows:

let _isFullscreen = isFullscreen(); // Refer to the "Check if it is in fullscreen mode" section
window.addEventListener('resize', () => {
    const currentIsFullscreen = isFullscreen();
    if(currentIsFullscreen !== _isFullscreen) {
        // This code block is executed when the fullscreen mode changes, which is equivalent to fullscreenchange
    }
    _isFullscreen = currentIsFullscreen;
})

Both approaches allow you to perform certain actions when the fullscreen mode changes in the browser. Choose the one that suits your needs and browser compatibility requirements.