Menu
I am new to Blazor and I am trying to figure out how to open up the browser in full screen mode. I know I could do a Javascript interrupt and run Javascript but that defeats the purpose for Blazor.
How could I enter and exit full screen mode in Blazor. Is there a way to do this?
This is the code for full screen mode in Javascript:
https://www.w3schools.com/jsref/met_element_requestfullscreen.asp
<script>
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;
/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
/* Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
}
</script>
691
The accepted answer works for Blazor WASM only. As pointed out in the comments, JS-interop is currently the only option for Blazor Server. Below is a full solution loosely based on the script provided by OP.
public static partial class IJSRuntimeExtensions
{
public static async Task<bool> OpenFullscreen(this IJSRuntime jsRuntime)
{
return await jsRuntime.InvokeAsync<bool>("openFullscreen");
}
public static async Task<bool> CloseFullscreen(this IJSRuntime jsRuntime)
{
return await jsRuntime.InvokeAsync<bool>("closeFullscreen");
}
}
function openFullscreen() {
// attempt to call the browser API
} else {
return false;
}
}
function closeFullscreen() {
// attempt to call the br
} else {
return false;
}
}
@inject IJSRuntime JS
@*...*@
private async Task HandleClick()
{
var succ = await JS.OpenFullscreen();
}
answered Oct 27 '25 11:10
You can use full screen mode in Blazor using PWA option:
Then you should press this install button in right upper corner:
After this you can run it as desktop application in full screen mode:
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
