Как выйти из полноэкранного onclick с помощью Javascript?

Ответ 1

Догадаться.

По-видимому, для входа в полноэкранный режим необходимо использовать элемент, однако для выхода из полноэкранного режима используется document.

Вот полная функция JavaScript для переключения полноэкранного режима, который работает !!!

function fullscreen() {
    var isInFullScreen = (document.fullscreenElement && document.fullscreenElement !== null) ||
        (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
        (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
        (document.msFullscreenElement && document.msFullscreenElement !== null);

    var docElm = document.documentElement;
    if (!isInFullScreen) {
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) {
            docElm.msRequestFullscreen();
        }
    } else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    }
}

И простой пример того, как его использовать:

<button onclick="fullscreen()">Toggle FullScreen</button>

Вы должны убедиться, что это короткий метод, вызываемый, когда пользователь выполняет действие на странице. Из того, что говорится в документации, является ли это функцией, которая требует режима более высокого доступа, и, таким образом, вы не можете (в настоящее время) автоматически включать полноэкранный режим для таких вещей, как загрузка страницы или асинхронные события (если они не являются событиями из действия пользователя, такие как клик) и т.д.

Ответ 2

Более обобщенный помощник (полученный из принятого ответа)...

Получить режим

Функция может быть вызвана без аргументов, чтобы выяснить, находится ли браузер в настоящее время в полноэкранном режиме. Возвращает true если так, и false противном случае.

Установить режим

Функция может быть вызвана с помощью bool, чтобы явно установить текущий режим, где true гарантирует, что браузер находится в полноэкранном режиме, а false гарантирует, что это не так.

Режим переключения

Функция может быть вызвана с null в качестве единственного аргумента, чтобы неявно установить режим, противоположный режиму, в котором она находится в данный момент.

let fullscreen = function() {

    let enter = function() {
        let body = document.body;
        if (body.requestFullscreen) body.requestFullscreen();
        else if (body.webkitRequestFullscreen) body.webkitRequestFullscreen();
        else if (body.mozRequestFullScreen) body.mozRequestFullScreen();
        else if (body.msRequestFullscreen) body.msRequestFullscreen();
    };

    let exit = function() {
        if (document.exitFullscreen) document.exitFullscreen();
        else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
        else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
        else if (document.msExitFullscreen) document.msExitFullscreen();
    };

    let attemptToGetState = element => element && element !== null;

    return function(action=undefined) {
        if (action === true) enter();
        else if (action === false) exit();
        else {
            let currentlyFullscreen = (
                attemptToGetState(document.fullscreenElement)       ||
                attemptToGetState(document.webkitFullscreenElement) ||
                attemptToGetState(document.mozFullScreenElement)    ||
                attemptToGetState(document.msFullscreenElement)
            );
            if (action === undefined) return !! currentlyFullscreen;
            else currentlyFullscreen ? exit() : enter();
        }
    };

}();

Ответ 3

Ответ кранга был великолепен, идея Карла о модульности тоже была. Но я не мог легко понять его код. Итак, вот моя версия в TypeScript:

function isInFullScreen() {
  const document: any = window.document;
  return (document.fullscreenElement && document.fullscreenElement !== null) ||
        (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
        (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
        (document.msFullscreenElement && document.msFullscreenElement !== null);
}

function requestFullScreen(elem: any) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  } else {
    console.warn("Did not find a requestFullScreen method on this element", elem);
  }
}

function exitFullScreen() {
  const document: any = window.document;
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

function toggleFullScreen(elem: any) {
  // based on https://stackoverflow.com/questions/36672561/how-to-exit-fullscreen-onclick-using-javascript
  if (isInFullScreen()) {
    exitFullScreen();
  } else {
    requestFullScreen(elem || document.body);
  }
}

Ответ 4

Решения, представленные здесь, невероятно длинные. Вы можете использовать эти несколько строк, чтобы показать или отменить полноэкранный режим.

Показать полный экран:

  /* You can use any HTML element through JS selector functions
   * eg. document.querySelector(".example");
  */
const element = document; 
const requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
requestFullScreen.call(element);

Отменить полный экран:

// As correctly mentioned in the accepted answer, exitFullscreen only works on document
const cancellFullScreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen || document.msExitFullscreen;
cancellFullScreen.call(document);

Кроме того, Chrome отобразит ошибку: Uncaught (in promise) TypeError: Document not active, если exitFullscreen вызывается, когда он не находится в полноэкранном режиме.