JavaScriptでフルスクリーンを検知する

各ベンダーごとにイベントリスナーを追加して、fullscreenchangeイベントを検知する必要がある。 （MDN見る限り、フルスクリーンAPIの諸々がSafariに対応してないのでちょっとめんどくさい）

developer.mozilla.org

document.addEventListener("webkitfullscreenchange", myFunc, false);
document.addEventListener("mozfullscreenchange", myFunc, false);
document.addEventListener("MSFullscreenChange", myFunc, false);
document.addEventListener("fullscreenchange", myFunc, false);

ただ、これらをいちいちadd/removeするのはめんどくさいので、まとめて扱えるようにする。 addで作ってるが、イベントリスナーを削除したいときはremoveでつくればよい。

const target = document;
addMultipleEventListener(
    target,
    "webkitfullscreenchange mozfullscreenchange MSFullscreenChange fullscreenchange",
    myFunc
)

---

const addMultipleEventListener = (element, eventNames, listener) => {
    const events = eventNames.split(" ");
    events.forEach(event => target.addEventListener(event, listener, false));
}

ハンドラーに関しては下記のように、fullScreenElementをチェックする。 nullが返ってきたらフルスクリーンではなく、対象となるDOMのnodeNameが返ってきたらフルスクリーンということ。

const myFunc() {
    const target = document;
    if (
        (target.webkitFullscreenElement &&
            target.webkitFullscreenElement !== null) ||
        (target.mozFullScreenElement &&
            target.mozFullScreenElement !== null) ||
        (target.msFullscreenElement &&
            target.msFullscreenElement !== null) ||
        (target.fullscreenElement && target.fullscreenElement !== null)
    ) {
        console.log("フルスクリーンです");
    } else {
        console.log("フルスクリーンじゃないです");
    }
}

下記参考URL

w3g.jp

qiita.com