"fullscreenchange" 事件与所有浏览器都不兼容（寻找 Vanilla Javascript 修复）

Question

我正在使用 "fullscreenchange" 事件来应用 css 我想通过添加或删除一个 ID (#showFullscreen) 来控制 css已经应用于 .fullscreen.

    var fullscreen = document.getElementsByClassName("fullscreen");

    document.addEventListener("fullscreenchange", function() {
        if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
            fullscreen[0].setAttribute("id", "showFullscreen");
        } else if (!document.fullscreenElement || !document.webkitFullscreenElement || !document.mozFullScreenElement || !document.msFullscreenElement) {
            fullscreen[0].removeAttribute("id", "showFullscreen");
        }
     });

如何使用 vanilla javascript 让此代码在所有浏览器中工作？

Answer 1

如this documentation bij W3Schools 中所述，您需要根据浏览器为事件名称添加前缀。

// Includes an empty string because fullscreenchange without prefix is
// also a valid event we need to listen for
const prefixes = ["", "moz", "webkit", "ms"]
var fullscreen = document.getElementsByClassName("fullscreen");
var fullscreenElement = document.fullscreenElement || /* Standard syntax */
  document.webkitFullscreenElement || /* Chrome, Safari and Opera syntax */
  document.mozFullScreenElement || /* Firefox syntax */
  document.msFullscreenElement /* IE/Edge syntax */;

prefixes.forEach(function(prefix) {
 document.addEventListener(prefix + "fullscreenchange", function() {
    if (fullscreenElement) {
        fullscreen[0].setAttribute("id", "showFullscreen");
    } else if (!document.fullscreenchange) {
        fullscreen[0].removeAttribute("id", "showFullscreen");
    }
 });
});

"fullscreenchange" 事件与所有浏览器都不兼容（寻找 Vanilla Javascript 修复）

"fullscreenchange" event isn't compatible with every browser (looking for Vanilla Javascript fix)

javascript

fullscreenchange