how to initialize fullscreen without user interaction

Question

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!

Check [DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded). You may also try `(function(){/*Your code to full screen*/})();` — Venkata Raju, Jun 15 '15 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, Jun 16 '15 at 09:40
you cannot force the user to go fullscreen without a user action — Fabrizio Calderan, Jun 16 '15 at 14:56

score 5 · Accepted Answer · edited May 23 '17 at 12:10

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).

Is it possible to use something like puppeteer to mimic such a behavior? — Matsu, May 15 '22 at 16:17

score 2 · Answer 2 · answered Dec 28 '21 at 18:36

2

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

};

answered Dec 28 '21 at 18:36

DexteR

21
2

1

Rotating phone is also a user gesture. So this doesn't actually solve the problem. – Sam May 08 '22 at 08:19

score 0 · Answer 3 · answered May 03 '17 at 21:59

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

A click (`$('html').click`) is a user interaction. – keredson Feb 02 '23 at 02:53 — keredson, Feb 02 '23 at 02:53

how to initialize fullscreen without user interaction

3 Answers3

Linked