How to open a web page automatically in full screen mode

Question

How do I open a web page automatically in full screen mode?

I am looking for a solution to open an web page automatically in full screen mode, without expecting user to users press F11 or any other browser-specifc key.

I've searched a lot, but I just could not find a solution.

Is there a script or library or browser specific API available to help me achieve this?

possible duplicate of [Is there a way to make HTML5 video fullscreen?](http://stackoverflow.com/questions/1055214/is-there-a-way-to-make-html5-video-fullscreen). Even though the question itself my not be a duplicate to this one, the accepted answer would match here too. In any case have a look at the [HTML5 fullscreen API](http://www.sitepoint.com/html5-full-screen-api/) — feeela, Oct 14 '13 at 07:34
Found a similar question [http://stackoverflow.com/questions/7495373/how-to-make-browser-full-screen-using-f11-key-event-through-javascript] — Mozak, Oct 14 '13 at 07:36
possible duplicate of [Switch window between normal and full-screen mode](http://stackoverflow.com/questions/11436376/switch-window-between-normal-and-full-screen-mode) — JJJ, Oct 14 '13 at 07:37
It's not possible to open the page in full screen without user interaction (clicking on a button etc.) because it would be extremely annoying. — JJJ, Oct 14 '13 at 07:37
https://github.com/kayahr/jquery-fullscreen-plugin Works in Webkit-based browsers (Like Chrome and Safari), Firefox and IE11+ and etc — Satishakumar Awati, Mar 02 '14 at 20:25

score 47 · Accepted Answer · edited May 23 '17 at 12:02

For Chrome via Chrome Fullscreen API

Note that for (Chrome) security reasons it cannot be called or executed automatically, there must be an interaction from the user first. (Such as button click, keydown/keypress etc.)

addEventListener("click", function() {
    var
          el = document.documentElement
        , rfs =
               el.requestFullScreen
            || el.webkitRequestFullScreen
            || el.mozRequestFullScreen
    ;
    rfs.call(el);
});

Javascript Fullscreen API as demo'd by David Walsh that seems to be a cross browser solution

// Find the right method, call on correct element
function launchFullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}

// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element

score 2 · Answer 2 · answered Oct 14 '13 at 07:35

2

Only works in IE:

window.open ("mapage.html","","fullscreen=yes");  
window.open('','_parent','');  
window.close();

answered Oct 14 '13 at 07:35

Jitendra Pancholi

7,897
12
51
84

score -1 · Answer 3 · answered Jul 21 '17 at 08:03

It's better to try to simulate a webbrowser by yourself.You don't have to stick with Chrome or IE or else thing.

If you're using Python,you can try package pyQt4 which helps you to simulate a webbrowser. By doing this,there will not be any security reasons and you can set the webbrowser to show in full screen mode automatically.

BigCoder · Answer 4 · 2019-07-06T16:45:35.797

-1

You can go fullscreen automatically by putting this code in:

var elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen() }

demo: https://codepen.io/ConfidentCoding/pen/ewLyPX

note: does not always work for security reasons. but it works for me at least. does not work when inspecting and pasting the code.

edited Jul 06 '19 at 16:45

answered Jul 06 '19 at 00:55

BigCoder

9
3

You should probably provide a little bit more information other than "does not always work". When does it not work? Why? – taylorthurlow Jul 06 '19 at 01:43

Udit mehra · Answer 5 · 2019-10-12T10:40:58.817

view full size page large (function () { var viewFullScreen = document.getElementById("view-fullscreen"); if (viewFullScreen) { viewFullScreen.addEventListener("click", function () { var docElm = document.documentElement; if (docElm.requestFullscreen) { docElm.requestFullscreen(); } else if (docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); } else if (docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }, false); } })();

<div class="container">      
            <section class="main-content">
                                    <center><a href="#"><button id="view-fullscreen">view full size page large</button></a><center>
                                           <script>(function () {
    var viewFullScreen = document.getElementById("view-fullscreen");
    if (viewFullScreen) {
        viewFullScreen.addEventListener("click", function () {
            var docElm = document.documentElement;
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
        }, false);
    }
    })();</script>
                                           </section>
</div>

for view demo clcik here demo of click to open page in fullscreen

score -3 · Answer 6 · edited Nov 30 '19 at 17:02

-3

window.onload = function() {
    var el = document.documentElement,
        rfs = el.requestFullScreen
        || el.webkitRequestFullScreen
        || el.mozRequestFullScreen;
    rfs.call(el);
};

edited Nov 30 '19 at 17:02

Jack Slingerland

2,651
5
34
56

answered Nov 30 '19 at 16:22

Jart Jet

1
1

I doubt that this can ever help or even work at all. In order to convince me otherwise, please explain how you mean this to work and solve the problem. – Yunnosch Nov 30 '19 at 17:08

How to open a web page automatically in full screen mode

6 Answers6

Linked

Related