javascript Forcer le plein écran du navigateur sur un site

  • Initiateur de la discussion LeGrandPatou
  • Date de début
L

LeGrandPatou

Invité
Bonjour à tous,

Voilà j'ai un site en développement et comme il ressemble plus à une application qu'à un site je voudrais que lorsque les visiteurs arrivent sur mon site le navigateur se déploie automatiquement en mode plein écran et idéalement retour l'affichage normal quand on le quitte.

J'ai trouvé les fonctions sur MDN mais je peine à les automatiser
Merci de m'aider !
PS : j'ai posté dans la section javascript mais si c'est faisable en PHP je ne suis pas contre.
 

Hamza

Membre
Salut,
Personnellement je ne suis pas fan des sites qui "prennent le contrôle" de mon navigateur, ne serait-ce que pour déclencher le plein écran.
Pourquoi tu ne te contentes pas d'une pop-up qui recommande le plein écran avec un bouton pour l'activer le cas échéant ?
 

CandyShop

Membre
Je partage l'avis d'Hamza et d'ailleurs je me demande si c'est possible de l'automatiser
Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera.
D'autant plus que tu risques des différences d'affichage selon les utilisateurs car il n'est pas certifié que la commande fonctionne sous Safari ou Opera.
 

Anthony

Membre
Jolie fonction !
JavaScript
(function () {
    'use strict';
    var document = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {};
    var isCommonjs = typeof module !== 'undefined' && module.exports;
    var fn = (function () {
        var val;
        var fnMap = [
            [
                'requestFullscreen',
                'exitFullscreen',
                'fullscreenElement',
                'fullscreenEnabled',
                'fullscreenchange',
                'fullscreenerror'
            ],
            // New WebKit
            [
                'webkitRequestFullscreen',
                'webkitExitFullscreen',
                'webkitFullscreenElement',
                'webkitFullscreenEnabled',
                'webkitfullscreenchange',
                'webkitfullscreenerror'
            ],
            // Old WebKit
            [
                'webkitRequestFullScreen',
                'webkitCancelFullScreen',
                'webkitCurrentFullScreenElement',
                'webkitCancelFullScreen',
                'webkitfullscreenchange',
                'webkitfullscreenerror'
            ],
            [
                'mozRequestFullScreen',
                'mozCancelFullScreen',
                'mozFullScreenElement',
                'mozFullScreenEnabled',
                'mozfullscreenchange',
                'mozfullscreenerror'
            ],
            [
                'msRequestFullscreen',
                'msExitFullscreen',
                'msFullscreenElement',
                'msFullscreenEnabled',
                'MSFullscreenChange',
                'MSFullscreenError'
            ]
        ];
        var i = 0;
        var l = fnMap.length;
        var ret = {};
        for (; i < l; i++) {
            val = fnMap[i];
            if (val && val[1] in document) {
                for (i = 0; i < val.length; i++) {
                    ret[fnMap[0][i]] = val[i];
                }
                return ret;
            }
        }
        return false;
    })();
    var eventNameMap = {
        change: fn.fullscreenchange,
        error: fn.fullscreenerror
    };
    var screenfull = {
        request: function (element, options) {
            return new Promise(function (resolve, reject) {
                var onFullScreenEntered = function () {
                    this.off('change', onFullScreenEntered);
                    resolve();
                }.bind(this);
                this.on('change', onFullScreenEntered);
                element = element || document.documentElement;
                var returnPromise = element[fn.requestFullscreen](options);
                if (returnPromise instanceof Promise) {
                    returnPromise.then(onFullScreenEntered).catch(reject);
                }
            }.bind(this));
        },
        exit: function () {
            return new Promise(function (resolve, reject) {
                if (!this.isFullscreen) {
                    resolve();
                    return;
                }
                var onFullScreenExit = function () {
                    this.off('change', onFullScreenExit);
                    resolve();
                }.bind(this);
                this.on('change', onFullScreenExit);
                var returnPromise = document[fn.exitFullscreen]();
                if (returnPromise instanceof Promise) {
                    returnPromise.then(onFullScreenExit).catch(reject);
                }
            }.bind(this));
        },
        toggle: function (element, options) {
            return this.isFullscreen ? this.exit() : this.request(element, options);
        },
        onchange: function (callback) {
            this.on('change', callback);
        },
        onerror: function (callback) {
            this.on('error', callback);
        },
        on: function (event, callback) {
            var eventName = eventNameMap[event];
            if (eventName) {
                document.addEventListener(eventName, callback, false);
            }
        },
        off: function (event, callback) {
            var eventName = eventNameMap[event];
            if (eventName) {
                document.removeEventListener(eventName, callback, false);
            }
        },
        raw: fn
    };
    if (!fn) {
        if (isCommonjs) {
            module.exports = {isEnabled: false};
        } else {
            window.screenfull = {isEnabled: false};
        }
        return;
    }
    Object.defineProperties(screenfull, {
        isFullscreen: {
            get: function () {
                return Boolean(document[fn.fullscreenElement]);
            }
        },
        element: {
            enumerable: true,
            get: function () {
                return document[fn.fullscreenElement];
            }
        },
        isEnabled: {
            enumerable: true,
            get: function () {
                // Coerce to boolean in case of old WebKit
                return Boolean(document[fn.fullscreenEnabled]);
            }
        }
    });
    if (isCommonjs) {
        module.exports = screenfull;
    } else {
        window.screenfull = screenfull;
    }
})();
 

Nicolas

Membre
Jolie en TypeScript aussi !
Le code est ultra commenté...
TypeScript
/// <reference lib="dom"/>

declare namespace screenfull {
    type RawEventNames = {
        readonly requestFullscreen: string;
        readonly exitFullscreen: string;
        readonly fullscreenElement: string;
        readonly fullscreenEnabled: string;
        readonly fullscreenchange: string;
        readonly fullscreenerror: string;
    };

    type EventName = 'change' | 'error';

    interface Screenfull {
        /**
        Whether fullscreen is active.
        */
        readonly isFullscreen: boolean;

        /**
        The element currently in fullscreen, otherwise `null`.
        */
        readonly element: Element | null;

        /**
        Whether you are allowed to enter fullscreen. If your page is inside an `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`).

        @example
        ```
        if (screenfull.isEnabled) {
            screenfull.request();
        }
        ```
        */
        readonly isEnabled: true;

        /**
        Exposes the raw properties (prefixed if needed) used internally.
        */
        raw: RawEventNames;

        /**
        Make an element fullscreen.

        If your page is inside an `<iframe>` you will need to add a `allowfullscreen` attribute (+ `webkitallowfullscreen` and `mozallowfullscreen`).

        Keep in mind that the browser will only enter fullscreen when initiated by user events like click, touch, key.

        @param element - Default is `<html>`. If called with another element than the currently active, it will switch to that if it's a decendant.
        @param options - [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).
        @returns A promise that resolves after the element enters fullscreen.

        @example
        ```
        // Fullscreen the page
        document.getElementById('button').addEventListener('click', () => {
            if (screenfull.isEnabled) {
                screenfull.request();
            } else {
                // Ignore or do something else
            }
        });

        // Fullscreen an element
        const element = document.getElementById('target');

        document.getElementById('button').addEventListener('click', () => {
            if (screenfull.isEnabled) {
                screenfull.request(element);
            }
        });

        // Fullscreen an element with options
        const element = document.getElementById('target');

        document.getElementById('button').addEventListener('click', () => {
            if (screenfull.isEnabled) {
                screenfull.request(element, {navigationUI: 'hide'});
            }
        });

        // Fullscreen an element with jQuery
        const element = $('#target')[0]; // Get DOM element from jQuery collection

        $('#button').on('click', () => {
            if (screenfull.isEnabled) {
                screenfull.request(element);
            }
        });
        ```
        */
        request(element?: Element, options?: FullscreenOptions): Promise<void>;

        /**
        Brings you out of fullscreen.

        @returns A promise that resolves after the element exits fullscreen.
        */
        exit(): Promise<void>;

        /**
        Requests fullscreen if not active, otherwise exits.

        @param element - Default is `<html>`. If called with another element than the currently active, it will switch to that if it's a decendant.
        @param options - [`FullscreenOptions`](https://developer.mozilla.org/en-US/docs/Web/API/FullscreenOptions).
        @returns A promise that resolves after the element enters/exits fullscreen.

        @example
        ```
        // Toggle fullscreen on a image with jQuery

        $('img').on('click', event => {
            if (screenfull.isEnabled) {
                screenfull.toggle(event.target);
            }
        });
        ```
        */
        toggle(element?: Element, options?: FullscreenOptions): Promise<void>;

        /**
        Add a listener for when the browser switches in and out of fullscreen or when there is an error.

        @example
        ```
        // Detect fullscreen change
        if (screenfull.isEnabled) {
            screenfull.on('change', () => {
                console.log('Am I fullscreen?', screenfull.isFullscreen ? 'Yes' : 'No');
            });
        }

        // Detect fullscreen error
        if (screenfull.isEnabled) {
            screenfull.on('error', event => {
                console.error('Failed to enable fullscreen', event);
            });
        }
        ```
        */
        on(name: EventName, handler: (event: Event) => void): void;

        /**
        Remove a previously registered event listener.

        @example
        ```
        screenfull.off('change', callback);
        ```
        */
        off(name: EventName, handler: (event: Event) => void): void;

        /**
        Alias for `.on('change', function)`.
        */
        onchange(handler: (event: Event) => void): void;

        /**
        Alias for `.on('error', function)`.
        */
        onerror(handler: (event: Event) => void): void;
    }
}

/**
Simple wrapper for cross-browser usage of the JavaScript [Fullscreen API](https://developer.mozilla.org/en/DOM/Using_full-screen_mode), which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.
*/
declare const screenfull: screenfull.Screenfull | {isEnabled: false};

export = screenfull;
export as namespace screenfull;

Je n'ai pas réussi à le dé-commenter correctement, je tombe sur des erreurs de syntaxe.
C'est pas évident évident.
 

Anthony

Membre
30 lignes de TypeScript contre 157 en JS... :whistle:
TypeScript uncomented
declare namespace screenfull {
    type RawEventNames = {
        readonly requestFullscreen: string;
        readonly exitFullscreen: string;
        readonly fullscreenElement: string;
        readonly fullscreenEnabled: string;
        readonly fullscreenchange: string;
        readonly fullscreenerror: string;
    };

    type EventName = 'change' | 'error';

    interface Screenfull {
        readonly isFullscreen: boolean;
        readonly element: Element | null;
        readonly isEnabled: true;
        raw: RawEventNames;
        request(element?: Element, options?: FullscreenOptions): Promise<void>;
        exit(): Promise<void>;
        toggle(element?: Element, options?: FullscreenOptions): Promise<void>;
        on(name: EventName, handler: (event: Event) => void): void;
        off(name: EventName, handler: (event: Event) => void): void;
        onchange(handler: (event: Event) => void): void;
        onerror(handler: (event: Event) => void): void;
    }
}
declare const screenfull: screenfull.Screenfull | {isEnabled: false};

export = screenfull;
export as namespace screenfull;
 

Anthony

Membre
TypeScript est intéressant car il permet de coder du JS plus intelligemment.

Mais il n'est pas interprété par les navigateurs, une fois ton code TS validé il faut le "transcompiler" en JavaScript qui lui ne pose pas de problème pour IE/Safari/Chrome/FF...
 

Ces discussions pourraient vous intéresser...

Yo ! J'ai une div sans bordure remplie de cellules horizontales auxquelles j'applique une bordure sur le bord bas pour les séparer entre elles. Le problème c'est que la dernière je ne veux pas de bordure basse puisqu'il n'y a plus de cellule sous elle. Je n'ai pas la main sur le HTML...
Bonjour, Je voulais partager avec vous un lien que j'ai découvert récemment : Random Colors - Hex Colors Pour trouver l'inspiration il est juste parfait, les couleurs et leurs nuances sont superbement bien présentées. En cliquant sur le code couleur vous êtes redirigés vers une page...
Hey tout le monde ! Je viens de m'inscrire et me voilà avec ma première question : Comment faire un effet de clic "genre physique" sur un bouton en CSS ? Avec hover j'arrive à faire un petit effet de surélévation mais là c'est le contraire que je voudrais, comme si on appuyait...
Haut