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();
}
};
Post a Comment for "How To Initialize Fullscreen Without User Interaction"