Execute F11 keypress programmatically on view load for MVC 5 website

Question

We are developing a website using MVC 5. We would like to automatically simulate a keypress (F11) when one of the views loads. This must happen automatically on view load. The whole purpose of this is to make the browser fullscreen.

So far we have the following code bellow which works when testing locally but when we release it live to Azure, it does not work.

    [DllImport("user32.dll")]
    public static extern int SetForegroundWindow(IntPtr hWnd);

    [STAThread]
    public ActionResult StudentView()
    {

        while (true)
        {
            Process[] processes = Process.GetProcessesByName("chrome");

            foreach (Process proc in processes)
            {
                SetForegroundWindow(proc.MainWindowHandle);
                SendKeys.SendWait("{F11}");
            }

            Thread.Sleep(5000);
            return View();
        }
    }

We have also tried some of the solutions in this question but again it does not work when the website is released to live. Simulating Key Press c#

Please assist us to make the browser full screen when view loads. Thanks in advance.

Stefan · Answer 1 · 2020-06-06T16:08:16.380

I am afraid you'll need a different approach. Not all browsers will use F11 to go full screen.

Importing the user32.dll, and simulating the key-press will only work, if executed on a windows client - locally, not from azure. There are some full screen options for browsers - but I am not sure if they fit you case. Video playback components are able to request full screen; you might want to dig into that.

Otherwise, if you target a specific OS or browser, you can create a custom client side app or plugin.

As for the javascript part, you can find an example here: https://www.w3schools.com/howto/howto_js_fullscreen.asp, but I am not sure if it will fit you requirements.

Here's one of the examples:

source: https://www.w3schools.com/howto/howto_js_fullscreen.asp

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Chrome, Safari and Opera syntax */
:-webkit-full-screen {
  background-color: yellow;
}

/* Firefox syntax */
:-moz-full-screen {
  background-color: yellow;
}

/* IE/Edge syntax */
:-ms-fullscreen {
  background-color: yellow;
}

/* Standard syntax */
:fullscreen {
  background-color: yellow;
}

/* Style the button */
button {
  padding: 20px;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>Fullscreen with JavaScript</h2>
<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>

<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>

<script>
var elem = document.documentElement;
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}
</script>

<p>Note: Internet Explorer 10 and earlier does not support the msRequestFullscreen() method.</p>

</body>
</html>

Aagh that did cross my mind to be honest. I had a very similar javascript code to this before I went with my current approach. But with this JS code I got this error: Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture. One way that I got the browser to go full screen 'sort of automatically' is to call a similar function to your openFullscreen function on mouse click. But that did not work that well. I will try your approach shortly and see if that will work. Thank you for this — Lyubomir Ivanov Valchev, Jun 06 '20 at 16:11
I see you call your function on button click. Is there anyway to call this function on page load without getting this error: Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture. — Lyubomir Ivanov Valchev, Jun 06 '20 at 16:16
Ah, yes, I was wondering about that: it basically prevents automated full-screen mode. I still think a plugin for chrome, or a kiosk mode browser would work as well - but that's OS / browser specific, and it's up to you if this would be sufficient for your use case. — Stefan, Jun 06 '20 at 16:19
Kiosk mode browser should be sufficient enough I suppose. How would I approach the kiosk mode way? — Lyubomir Ivanov Valchev, Jun 06 '20 at 16:21
You can search the internet for your specific case, here's an article about chrome: https://www.think2loud.com/868-google-chrome-full-screen-kiosk-mode/ It seems that **chrome.exe –kiosk http:// [enter URL here]** would do the trick for chrome on windows. — Stefan, Jun 06 '20 at 16:23
Ok great. I will try the kiosk mode approach and see if it works.This is more complicated than I thought :/ — Lyubomir Ivanov Valchev, Jun 06 '20 at 16:28
Yeps, .... if you additionally want to prevent users to exit the browser it will lead to additional problems. In that case you might want to check out Windows10 kiosk mode - it prevents access to other parts of the system — Stefan, Jun 06 '20 at 16:30
No, I am not gonna go into that. I just want to get the browser to open in full screen. — Lyubomir Ivanov Valchev, Jun 06 '20 at 16:35

Execute F11 keypress programmatically on view load for MVC 5 website

1 Answers1