How to make browser fullscreen (same like F11) using java script or action script?

Question

i want to achieve exact same behavior like F11 key. when we press F11 key in windows the whole browser goes full-screen (with all open tabs).

how can i do that using JavaScript or ActionScript.

i have already tried element.requestFullScreen(). But i an not talking about this.using element.requestFullScreen() is not useful for me because pressing Esc exits full screen and i don't want that.

_pressing Esc exits full screen and i don't want that_.Have you ever thought about if your users **want** to have a full screen without asking them if they want that? There are **good** reasons for that ESC leads to exit. — B001ᛦ, Sep 01 '16 at 10:46
@bub thats why i said that i want to achieve behavior like F11 because i have doubt that my target users might don't know how to full-screen browser.So i want to put a button to make browser full screen and pressing Esc conflicts with my application interface. — HirenParekh, Sep 01 '16 at 10:49
Ok, but how can one prevent user _from the need_ of clicking ESC? — B001ᛦ, Sep 01 '16 at 10:55
@HirenParekh, what is your application doing with ESC key that you can't assign to a different key? ESC is browser standard for "escape from fullscreen" functionality. It's there for **security** reason. If some app/website locks me into fullscreen whilst installing virus I must be able to "escape" without power cut. **F11** is an O.S & browser (software) feature, not a website API feature. Your solution is either change from needing ESC key as app control or lose fullscreen ability in the app. — VC.One, Sep 01 '16 at 16:22

score 1 · Answer 1 · edited May 23 '17 at 10:29

1

This was solved in this post: How to make the window full screen with Javascript (stretching all over the screen)

function maxWindow() {
    window.moveTo(0, 0);


    if (document.all) {
        top.window.resizeTo(screen.availWidth, screen.availHeight);
    }

    else if (document.layers || document.getElementById) {
        if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
            top.window.outerHeight = screen.availHeight;
            top.window.outerWidth = screen.availWidth;
        }
    }
}

Newest solution, also posted there. Just modify it to apply it where you need it. This is opening a new window:

<script>
    var popupScreenParameters = [ 'height='+screen.height, 'width='+screen.width, 'fullscreen=yes' ].join(',');
    var windowVariable = window.open('popupUrl',"popupName",popupScreenParameters); windowVariable .moveTo(0,0);
</script>

edited May 23 '17 at 10:29

Community

1
1

answered Sep 01 '16 at 10:52

viveso

49
5

didn't work for me. i have tried in Chrome and Firefox. – HirenParekh Sep 01 '16 at 11:05
Look at the new solution. Is this what you need? – viveso Sep 01 '16 at 11:14
thanks for update but still this is not what i need.what i want is to give a button in my application for F11 key. when user press that button it should do the task of F11 key. – HirenParekh Sep 01 '16 at 12:04

score 1 · Answer 2 · answered Sep 01 '16 at 11:29

You can use native full-screen api, here an example. (Please create a HTML file to see it as if this code in pasted in an iframe, like jsfiddle full screen mode won't show up).

API:

Element.requestFullscreen()

Document.exitFullscreen()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 Full-Screen</title>
<style>
* {
    padding: 0;
    margin: 0;
}

html, body
{
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

body {
    margin: 10px;
}

p {
    margin: 0 0 1em 0;
}

figure {
    position: relative;
    display: block;
    width: 30%;
    float: right;
    padding: 0;
    margin: 1em;
    cursor: pointer;
}

figure img {
    display: block;
    max-width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
}

figure:-moz-full-screen img {
    position: fixed;
}

figure:-ms-fullscreen {
    width: auto;
}

figure:-ms-fullscreen img {
    position: fixed;
}

figure:fullscreen img {
    position: fixed;
}
</style>
</head>
<body>

<header>
<h1>Full-Screen Demonstration</h1>
</header>

<article>

<figure id="myimage">
<img src="http://dummyimage.com/600x400/000/fff" />
</figure>


<p>Click on image to go full screen</p>

</article>

<script>


if (
    document.fullscreenEnabled || 
    document.webkitFullscreenEnabled || 
    document.mozFullScreenEnabled ||
    document.msFullscreenEnabled
) {

    var i = document.getElementById("myimage");

    i.onclick = function() {

        // in full-screen?
        if (
            document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement
        ) {

            // exit full-screen
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }

        }
        else {

            // go full-screen
            if (i.requestFullscreen) {
                this.requestFullscreen();
            } else if (i.webkitRequestFullscreen) {
                i.webkitRequestFullscreen();
            } else if (i.mozRequestFullScreen) {
                i.mozRequestFullScreen();
            } else if (i.msRequestFullscreen) {
                i.msRequestFullscreen();
            }

        }

    }

}
</script>

</body>
</html>

How to make browser fullscreen (same like F11) using java script or action script?

2 Answers2