Как получить полноэкранный режим на определенных страницах в моем веб-приложении

В моем приложении я хочу, чтобы некоторые страницы отображались в полноэкранном режиме. В основном это то, что я хочу: «Пользователь не может получить доступ к браузеру или рабочему столу компьютера или выполнять какие-либо другие действия за пределами окна с помощью мыши».

Я пытался использовать этот полноэкранный API: https://www.npmjs.com/package/screenfull< /а>

Я работаю в html5/angular 5. Я сделал директиву, как это было предложено в примере angular на странице API. Я использовал селектор «toggleFullscreen» с кнопкой (переход на следующую страницу), например, на странице 3. Если я хочу, чтобы на странице 4 и 5 был полноэкранный режим. полный экран на странице 4. Но он не работает. Страница 4 не отображается на весь экран.

Я совершенно новичок в angular. Так может ли кто-нибудь предложить другой способ реализовать эту функциональность в моем коде? Не могу понять, почему у меня не работает этот API.


typescript angular html fullscreen html5-fullscreen
person sar    schedule 06.09.2018    source источник
comment
Вы просите запретить пользователю ничего не делать, кроме использования вашего приложения? Это было бы плохо по многим причинам и невозможно.   -  person Mathias    schedule 06.09.2018
comment
Да, это то, что я хочу сделать. Я не ставил требования. Мне сказали реализовать этот функционал вот так.   -  person sar    schedule 06.09.2018
comment
Это было бы так опасно, если бы они позволили это. У кого-то может быть веб-страница, которая блокирует компьютер или устройство, пока вы не заплатите выкуп.   -  person Mathias    schedule 06.09.2018

Ответы (1)


arrow_upward
0
arrow_downward 

toggleFullScreen() {
        let elem =  document.body; 
        let methodToBeInvoked = elem.requestFullscreen || 
         elem.webkitRequestFullScreen || elem['mozRequestFullscreen'] 
         || 
         elem['msRequestFullscreen']; 
        if(methodToBeInvoked) methodToBeInvoked.call(elem);

    }

вызовите эту функцию везде, где вы хотите запустить полноэкранный режим, например, при нажатии кнопки отправки вызовите этот метод, который загрузит страницу в полноэкранном режиме.

person Vaibhav Kumar Goyal    schedule 06.09.2018
comment
Функция не дает никаких ошибок в моем коде. Я хочу вызвать его на этой кнопке: ‹button class=ok type=submit [disabled]=inProgress['submit'] ›{{ 'review.view.next' | перевести }}‹/кнопка›. Но по-прежнему не открывается полноэкранный режим при нажатии кнопки. - person sar; 06.09.2018
comment
можете ли вы создать пример stackbiltz, чтобы я мог над ним поработать - person Vaibhav Kumar Goyal; 06.09.2018