javascript - полный экран

Question

if (!document.fullscreenElement 
    && !document.mozFullScreenElement 
    && !document.webkitFullscreenElement 
    && !document.msFullscreenElement) { 

    if (document.documentElement.requestFullscreen) { 
     document.documentElement.requestFullscreen(); 
    } else if (document.documentElement.msRequestFullscreen) { 
     document.documentElement.msRequestFullscreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
     document.documentElement.mozRequestFullScreen(); 
    } else if (document.documentElement.webkitRequestFullscreen) { 
     document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 
    } 
} 
else { 
    if (document.exitFullscreen) { 
     document.exitFullscreen(); 
    } else if (document.msExitFullscreen) { 
     document.msExitFullscreen(); 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } else if (document.webkitExitFullscreen) { 
     document.webkitExitFullscreen(); 
    } 
} 

У меня есть этот код для переключения на весь экран. Он работает, но у него есть некоторые небольшие проблемы.

1. Когда я нажав на кнопку полного экрана, после обновления выходов полноэкранного режима, но при нажатии клавиши F11 и обновления, полный экран не будет выход.

2. Если полноэкранный режим включен, после нажатия клавиши F11, нажав на кнопку полного экрана, не будет работать

Как я могу это исправил проблемы?

Answer 1

Я не знаю, сможете ли вы устранить эти проблемы. Они происходят, потому что есть два различных режима полного экрана:

• Один applied to elements/documents, что вы вызываете с помощью JavaScript (тот, который вы используете с API). Этот полноэкранный режим теряется при перезагрузке страницы или при переходе на другую страницу.
• Другой родной браузер, который задан пользователем с помощью F11 (применяется к самому браузеру, а не к странице/документу: если вы перезагрузите или перейдете на другой сайт, браузер продолжит работу в полноэкранном режиме).

Пока вы можете управлять первым с помощью JS, вы не можете управлять другим. Это имеет смысл с точки зрения удобства использования/безопасности: вы должны иметь возможность контролировать поведение на своей странице, но не вне его или предпочтений пользователя.

Проблемы, стоящие перед вами случиться, потому что:

• Выпуск 1:
  • By default the fullscreen flag is unset. Когда вы переходите в полноэкранный режим с помощью API, вы устанавливаете этот флаг, но когда вы обновляете страницу, флаг переходит в исходное значение (unset), и полный экран теряется. Точно так же, как любая другая переменная JavaScript будет сброшена при перезагрузке страницы.
  • Если вы установите браузер в полноэкранном режиме (используя F11), он останется таким, пока вы не выйдете из полноэкранного режима, независимо от того, где вы просматриваете или даже закрываете браузер. Вы задаете предпочтение браузера.
• Выпуск 2:
  • На самом деле, это не проблема, так как он работает, как ожидалось. Проблема в том, что вы идете полноэкранный (элемент) в полноэкранном режиме (окно) (fullscreenception!: P). Таким образом, вы не видите никаких видимых изменений, но действительно есть изменение, так как установлен флаг fullscreen. Вы можете увидеть разницу в этом demo by Robert Nyman. Он добавил CSS, чтобы страница загорелась, когда на :fullscreen. Нажмите F11 и обратите внимание, как фон не становится красным, теперь нажмите кнопку «Полноэкранный/Отключить полноэкранный режим», чтобы увидеть, как меняется цвет фона.