javascript – ASP.NET MVC Fullscreen and close Button-ThrowExceptions

Exception or error:

When I make the window go fullscreen how can I make the replacing location remain in fullscreen?

<!DOCTYPE html>
    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <meta charset="utf-8" />
    </head>
    <body>
        <div class="buttons">
            <div class="column-header">
            </div>
            <div align="center">
                <input type="submit" id="btnFullScreen" name="btnFullScreen" value="Fullscreen" style="font-size:xx-large; font-weight:bold; width:500px; height:300px; text-align:center; background-color:#e87a3a; border-color:#3f464c" />
            </div>
        </div>
        <script type="text/javascript">

            $("#btnFullScreen").click(function () {
                location.replace("/Home/About");
                var el = document.documentElement,
                    rfs = el.requestFullscreen
                        || el.webkitRequestFullScreen
                        || el.mozRequestFullScreen
                        || el.msRequestFullscreen
                    ;
                rfs.call(el);
            });
        </script>
    </body>
    </html>

And how can I make an application close button by fullscreen?

How to solve:

To answering your question,

First of all as you may know as browsers doesn’t allow sites to load in
full screen mode without user interaction. So you should have some user interaction to Handle this change your UX to go full screen mode.

Your work around would be.

  1. On new page location you have to set a Javascript $(document).ready(function () {} function where you have to assign a event listener EventListener it could be Mouse Over Mouse Click or anything you like.
  2. Once you call location.replace("/Home/About"); now on
    addEventListener function inside the (document).ready(function ()
    { }
    call that full screen function that would work.

So your code show look like below:

      $(document).ready(function () {   

            addEventListener("mouseover", function () { 
                          fullScreen()
                });

            function fullScreen(){
                   alert("Full Screen called");

                   var el = document.documentElement,
                   rfs = el.requestFullscreen
                   || el.webkitRequestFullScreen
                   || el.mozRequestFullScreen
                   || el.msRequestFullscreen;
                  rfs.call(el);                                             
                  };        
  });
  1. You could also use below function if you like to set any time for
    that.

    setTimeout(function(){ }, 2000);

  2. On Button close event please add below snippet

            $("#btnCloseScreen").click(function () {
    
                alert("Close Screen");
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
    
            });
    

    Hope it would help.

Leave a Reply

Your email address will not be published. Required fields are marked *