Function to open the full screen (Fullscreen) at angular 2

Asked

Viewed 661 times

0

I’m needing q my screen opens full ... When I give an ng Serves the application when running it comes with a fullscreen. Can someone give me a tip on how to do this ?

javascript angular javascript-events

  • Is it Angular or Angularjs? May it work in Ionic or browser on the computer?

1 answer

-1

Create this function: 

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

and add your call, passing the body element as a parameter in some event that the user can interact with.

For example, click a button with the phrase "Click here to Maximize" or the body click (just example):

<!DOCTYPE html>
<html>
<head>
    <title>teste</title>
    <script type="text/javascript">
        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}");
                }
            }
        }

        window.onload = function(){
            function setarFullScreen(){
                var elem = document.body;
                requestFullScreen(elem);
                document.getElementById("click").style.display = "none";    
            }
            document.getElementById("click").addEventListener("click", setarFullScreen);
        };
    </script>
</head>
<body>
    <button id="click">Clique aqui para maximizar</button>
    <div style="color: red;">teste</div>
</body>
</html>

Note: As a rule, the user must first accept the request in full screen, and it is not possible to automatically activate it in pageload, it needs to be triggered by a user (as in this example, by a button)

Browser other questions tagged javascript angular javascript-events

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