How To Initialize Fullscreen Without User Interaction

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 cor

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

Solution 2:

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" != typeofmodule && module.exports, b = "undefined" != typeofElement && "ALLOW_KEYBOARD_INPUT"inElement, 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]indocument) {
                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 () {
                returnBoolean(document[c.fullscreenElement]);
            }}, element: {enumerable: !0, get: function () {
                returndocument[c.fullscreenElement]
            }}, enabled: {enumerable: !0, get: function () {
                returnBoolean(document[c.fullscreenEnabled]);
            }}}), void(a ? module.exports = d : window.screenfull = d)) : void(a ? module.exports = !1 : window.screenfull = !1);
}();

Solution 3:

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

};