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!

Katharinakatharine

Check DOMContentLoaded. You may also try (function(){/*Your code to full screen*/})(); – Nasty

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? – Katharinakatharine

you cannot force the user to go fullscreen without a user action – Cosmopolitan

Answer 1

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

Kahler

Is it possible to use something like puppeteer to mimic such a behavior? – Ironwood

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

};

Eclampsia

Rotating phone is also a user gesture. So this doesn't actually solve the problem. – Highcolored

Answer 3

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

Longwinded

Answer 4

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

Campania

A click ($('html').click) is a user interaction. – Intramolecular