如何在没有用户交互的情况下初始化全屏

时间:2021-09-15 03:48:30

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!

谢谢!

2 个解决方案

#1


2  

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:

Chrome告诉我:

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

无法在“元素”上执行“requestFullScreen”:API只能由用户手势启动。

Firefox told me:

Firefox告诉我:

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

请求全屏被拒绝,因为没有从短暂运行的用户生成的事件处理程序中调用Element.mozRequestFullScreen()。

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

这是一个防止滥用的限制,类似于window.open上的限制(例如,请参阅此问题或此问题)。

#2


0  

You try this.

你试试这个。

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

jQuery plugin

jQuery插件

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

#1


2  

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:

Chrome告诉我:

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

无法在“元素”上执行“requestFullScreen”:API只能由用户手势启动。

Firefox told me:

Firefox告诉我:

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

请求全屏被拒绝,因为没有从短暂运行的用户生成的事件处理程序中调用Element.mozRequestFullScreen()。

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

这是一个防止滥用的限制,类似于window.open上的限制(例如,请参阅此问题或此问题)。

#2


0  

You try this.

你试试这个。

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

jQuery plugin

jQuery插件

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