Hi 65sametkaya65,
As per the documentation in Fullscreen API, you can't apply browser fullscreen mode on page load.
Due to security reasons, requestFullscreen() can not be called automatically.
It can only be called by a user action such as button, link click or keydown, keypress.
so if you want enable full screen you need to use button as already using in Login form by checking the cookie value.
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Home()
{
return View();
}
}
View
Login
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Login</title>
</head>
<body>
@using (Html.BeginForm("Home", "Home", FormMethod.Post))
{
<button type="submit">Login</button>
}
<button class="full-screen-button" onclick="toggleFullScreen()">Full screen</button>
<button class="full-screen-button" style="display: none;" onclick="exitFullScreen()">Cancel Full Screen</button>
<script type="text/javascript">
function toggleFullScreen() {
// Tam ekran durumu kontrol ediliyor
if (!document.fullscreenElement) {
// Tam ekran yapılıyor
document.documentElement.requestFullscreen();
// İptal düğmesi görünür hale getiriliyor
document.querySelectorAll('.full-screen-button')[1].style.display = 'inline-block';
// Setting cookie value to True.
document.cookie = "fullscreen=true";
}
}
function exitFullScreen() {
// Tam ekran kapatılıyor
if (document.exitFullscreen) {
document.exitFullscreen();
// İptal düğmesi gizleniyor
document.querySelectorAll('.full-screen-button')[1].style.display = 'none';
// Setting cookie value to False.
document.cookie = "fullscreen=false";
}
}
</script>
</body>
</html>
Home
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Home</title>
<script type="text/javascript">
function FullScreen() {
// Checking cookie value if true or not.
var isFullScreen = document.cookie.split('=')[1];
if (isFullScreen) {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
document.cookie = "fullscreen=true";
}
}
}
function ExitFullScreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
document.cookie = "fullscreen=false";
}
}
</script>
</head>
<body>
<button class="full-screen-button" onclick="FullScreen()">Full screen</button>
</body>
</html>
