# # 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.