javascript - How to open Web page in Fullscreen mode (F11 functionality) on body load

I am building a web application and I’m want to our web application open on fullscreen in browser by default I want, as our application run on browser at the same time it will open in full screen mode. I’m getting output on button click but this is not working on onload event of body.

Javascript Code:

<script>
    function show() {
        var elem = document.body;
        if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
            if (elem.requestFullScreen) {
                elem.requestFullScreen();
            } else if (elem.mozRequestFullScreen) {
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullScreen) {
                elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
            } else if (elem.msRequestFullscreen) {
                elem.msRequestFullscreen();
            }
        } else {
            if (document.cancelFullScreen) {
                document.cancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }

    }
</script>

HTML Code: This is working

<input type="button" value="click to toggle fullscreen" onclick="show()">

But this is not working

<body onload="show()">

Please help me how can I achieve this. Thanks.

Javascript Code:

<script>
    function show() {
        var elem = document.body;
        if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
            if (elem.requestFullScreen) {
                elem.requestFullScreen();
            } else if (elem.mozRequestFullScreen) {
                elem.mozRequestFullScreen();
            } else if (elem.webkitRequestFullScreen) {
                elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
            } else if (elem.msRequestFullscreen) {
                elem.msRequestFullscreen();
            }
        } else {
            if (document.cancelFullScreen) {
                document.cancelFullScreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }

    }
</script>

HTML Code: This is working

<input type="button" value="click to toggle fullscreen" onclick="show()">

But this is not working

<body onload="show()">

Please help me how can I achieve this. Thanks.

Share Improve this question asked Dec 1, 2014 at 10:22 user3313228 971 gold badge3 silver badges8 bronze badges

what error do you get? – Max Bumaye Commented Dec 1, 2014 at 10:42
no error is ing and also the output is not ing – user3313228 Commented Dec 1, 2014 at 11:30

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

It's not allowed to start the full screen mode without any user-interaction.

FullScreen mode requires user interaction. When a user fires any event (i.e. click, keypress, keydown) then your window can go to fullscreen.

If you have that option that you'll be able to manage that interaction then you can go with jQuery fullScreen plugin

Try this way : [Using user interaction]

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Test iframe</title>
    // load jQuery
    <script src="./jquery-fullscreen-plugin-master/jquery-2.1.1.js"></script>
    // load jquery fullscreen plugin
    <script src="./jquery-fullscreen-plugin-master/jquery.fullscreen-min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $("#fullscreenButton").on("click", function(){
                $("body").fullScreen(true);
            });
        });
    </script>
  </head>
  <body style="background:white">
    <button id="fullscreenButton">Go to FullScreen Mode</button>
  </body>
</html>

There's another way which is close to your scenario. But for that you have to let malicious script (auto fullscreen in your case) allowed in your browser.

javaScript :

var height = window.screen.availHeight;
var width = window.screen.availWidth;

for(var i = 0; i < 2; i++){
    window.open ("http://www.google./","","fullscreen=yes, width=" + width + ", height=" + height + "");
}

The following script will open new window in fullscreen mode. But first time it'll as for your permission to allow popups from your site. If you allow those it'll always execute next time until it is blocked again.

So what is happening here is you are getting the resolution of your device and open the window with the appropriate height and width.

jsFiddle - window.open()

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to open Web page in Fullscreen mode (F11 functionality) on body load - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)