Ask and store user permission to use full-screen?

Question

Ask and store user permission to use full-screen?

Asked 7 years, 4 months ago

Viewed 658 times

5

Apps usually asks for permission to use Smartphone features like microphone, camera... I wonder if it is possible to do the same on a page so that the Fullscreen mode is activated automatically whenever the user opens the page, since it gave permission for the page.

The code below puts the entire document in Fullscreen when it is triggered by some event click by exmeplo:

    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);
    }

Is there any way to request the user’s permission so that my site can use such function automatically, without relying on a trigger given by the same?

Are you familiar with the concept of Progressive Web Apps? I think that’s what you want: https://brasil.uxdesign.cc/o-que-s%C3%A3o-Progressive-web-apps-86e1b5306051#. 8rt2qxssj

– Daniel

2017/03/16 at 02:12
@cav_dan I know yes, I will even do tutorials on my site teaching users about, but it’s not necessarily what I want to do

– Leo Letto

2017/03/16 at 12:12

2 answers

Browser other questions tagged javascript html mobile fullscreen

You are not signed in. Login or sign up in order to post.

by Mathiasfc • **5,837** points · Answer 1 · 2017-03-13T22:32:34+00:00

Unfortunately for security reasons, specifically the chrome disables the mode automation fullscreen, requires prior permission from the user to activate it. I used this code to trigger the mode fullscreen

function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

 if (requestMethod) { // Native full screen.
    requestMethod.call(element);
 }else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
    var wscript = new ActiveXObject("WScript.Shell");
    if (wscript !== null) {
        wscript.SendKeys("{F11}");
    }
 }
}

I did tests by putting the following code in the functions document.onload, document.ready.

 var elem = document.body; 
 requestFullScreen(elem);

I got the following response from the browser on the console:

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user Gesture. requestFullScreen @main.html:20

Sources:
How to open a web page Automatically in full screen mode
Chrome fullscreen API
Run a website in fullscreen mode

by Rafael B. • **507** points · Answer 2 · 2017-03-11T22:47:45+00:00

Well, you can create a link that points to a window in Fullscreen mode as follows:

<a href="javascript:void(0);" onClick="window.open('http://www.google.com', '', 
'fullscreen=yes, scrollbars=auto');">Abrir Janela em Full Screen</a>

If you try to do the same automatically, on onload, you are able to receive a "popup lock" from the browser that prevents opening the window automatically:

<body onLoad="window.open('http://www.google.com', '', 'fullscreen=yes, scrollbars=auto'); window.opener=null; window.close(); return false;">

From Chrome 15, there is the possibility to use the Full Screen API that opens the entire screen (not a window) on Full Screen. See the demo.

But it is not possible to do it without user interaction, to avoid malicious uses. That is, the user needs to click or press a key to invoke full screen mode.

I find it difficult to get around this restriction, because it is something inherent to the HTML 5 specification.