Hi i'm beginner and i want to create a web-app and needs help in fullscreen when page is Load... without user interaction

I have something like this at the click function works correctly... but i want to load function at the start page

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

Someone help me :)

Thank you!

Hi i'm beginner and i want to create a web-app and needs help in fullscreen when page is Load... without user interaction

I have something like this at the click function works correctly... but i want to load function at the start page

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

Someone help me :)

Thank you!

• javascript
• css
• html
• firefox

• 1 Check DOMContentLoaded. You may also try (function(){/*Your code to full screen*/})(); – Venkata Raju Commented Jun 15, 2015 at 12:24
• Thank you for advice. I checked "DOMContentLoaded" with my code... Function doesn't work :(. When replace any other code for example "function myFunction() { alert("Hello"); } " it works...............Why is this happening? – siasty Commented Jun 16, 2015 at 9:40
• 6 you cannot force the user to go fullscreen without a user action – Fabrizio Calderan Commented Jun 16, 2015 at 14:56

4 Answers 4

That is not possible.

I ran the following snippet in my browser console:

var e = document.getElementById('answers');
(e.webkitRequestFullScreen || e.mozRequestFullScreen).apply(e);

Chrome told me:

Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.

Firefox told me:

Request for full-screen was denied because Element.mozRequestFullScreen() was not called from inside a short running user-generated event handler.

That is a restriction put in place to prevent abuse, similar to that on window.open (see this or this question for example).

This worked for me, but by rotating the phone on landscape or portrait mode.

window.screen.orientation.onchange = function() {

      if (this.type.startsWith('landscape')) {
        document.documentElement.webkitRequestFullscreen();
      } else {
        document.webkitExitFullscreen();
      }

};

There is one solution to do this. If you are trying things for personal projects then it might be helpful.

*Note : This is not good Security Practice.

You can follow following steps only on Firefox to allow full-screen without user interactions :

1. Open new tab in Firefox and type 'about:config'
2. You will see warning message. Click "I accept the risk!" button to proceed.
3. In the search box type 'full-screen-api.allow-trusted-requests-only'
4. Double click on the 'full-screen-api.allow-trusted-requests-only' entry to toggle its value. Now it will set to false and you will not get the error 'not called from inside a short running user-generated event handler'.

*Note : Malicious websites could exploit this setting to take control of your screen and trap you in full-screen mode. After doing experiments you can turn it on.

Hope this will be helpful...!

You try this.

$(document).ready(function () {
    $('html').click(function () {
        if (screenfull.isFullscreen !== true) {
            screenfull.toggle();
        }
    });
});

jQuery plugin

/*!
 * screenfull
 * v3.0.0 - 2015-11-24
 * (c) Sindre Sorhus; MIT License
 */
!function () {
    "use strict";
    var a = "undefined" != typeof module && module.exports, b = "undefined" != typeof Element && "ALLOW_KEYBOARD_INPUT"in Element, c = function () {
        for (var a, b, c = [["requestFullscreen", "exitFullscreen", "fullscreenElement", "fullscreenEnabled", "fullscreenchange", "fullscreenerror"], ["webkitRequestFullscreen", "webkitExitFullscreen", "webkitFullscreenElement", "webkitFullscreenEnabled", "webkitfullscreenchange", "webkitfullscreenerror"], ["webkitRequestFullScreen", "webkitCancelFullScreen", "webkitCurrentFullScreenElement", "webkitCancelFullScreen", "webkitfullscreenchange", "webkitfullscreenerror"], ["mozRequestFullScreen", "mozCancelFullScreen", "mozFullScreenElement", "mozFullScreenEnabled", "mozfullscreenchange", "mozfullscreenerror"], ["msRequestFullscreen", "msExitFullscreen", "msFullscreenElement", "msFullscreenEnabled", "MSFullscreenChange", "MSFullscreenError"]], d = 0, e = c.length, f = {}; e > d; d++)
            if (a = c[d], a && a[1]in document) {
                for (d = 0, b = a.length; b > d; d++)
                    f[c[0][d]] = a[d];
                return f;
            }
        return!1;
    }(), d = {request: function (a) {
            var d = c.requestFullscreen;
            a = a || document.documentElement, /5\.1[\.\d]* Safari/.test(navigator.userAgent) ? a[d]() : a[d](b && Element.ALLOW_KEYBOARD_INPUT);
        }, exit: function () {
            document[c.exitFullscreen]();
        }, toggle: function (a) {
            this.isFullscreen ? this.exit() : this.request(a);
        }, raw: c};
    return c ? (Object.defineProperties(d, {isFullscreen: {get: function () {
                return Boolean(document[c.fullscreenElement]);
            }}, element: {enumerable: !0, get: function () {
                return document[c.fullscreenElement]
            }}, enabled: {enumerable: !0, get: function () {
                return Boolean(document[c.fullscreenEnabled]);
            }}}), void(a ? module.exports = d : window.screenfull = d)) : void(a ? module.exports = !1 : window.screenfull = !1);
}();