Trucsweb.com

Trucsweb.com

Javascript

Les fenêtres ou l’objet WINDOW

RDFFav

Ouverture d’une page en mode plein écran - avec un hyperlien ou automatique

Ce script m’est souvent demandé, particulièrement l’ouverture automatique du mode plein écran. L’ouverture du mode plein écran se fait de la même manière que l’ouverture d’une nouvelle fenêtre, c’est seulement l’argument fullscreen qui détermine le plein écran. Noter que Netscape affiche toujours une barre en haut avec le titre de la page...window mode plein écran full screen fullscrean fullscreen onload forcer fenêtre fenètre alt-f4 requestFullscreenOuverture d’une page en mode plein écran - avec un hyperlien ou automatique

Attention

Ce script n’est plus à jour, il utilise le vieux PopUp créé avec une nouvelle fenêtre du navigateur. Il ne s’ouvre plus automatiquement dès le chargement de la page (onload) en raison de l’aspect sécuritaire. L’ouverture avec un bouton fonctionne toujours... Pour l’ouverture en plein écran de la fenêtre principale, consulter le tutoriel « HTML5 - API Fullscreen (plein écran) ».

  • · Niveau : DÉBUTANT
  • · Compatibilité : Tous les navigateurs

Ce script m’est souvent demandé, particulièrement l’ouverture automatique du mode plein écran. L’ouverture du mode plein écran se fait de la même manière que l’ouverture d’une nouvelle fenêtre, c’est seulement l’argument « fullscreen » qui détermine le plein écran. Noter que Netscape affiche toujours une barre en haut avec le titre de la page et un cadre tout autour de la page.

Remarque: Ce n’est pas agréable pour un internaute de se voir forcer le mode plein écran, lui qui a toujours le choix de l’activer et de plus en gardant un contrôle sur ça navigation via le menu caché en haut de la page, menu qui n’est pas présent quand le mode plein écran est activé automatiquement. Cette remarque revient sans cesse même si un bouton ou une mention disant de faire [ALT-F4] pour fermer la page sont ajoutés. Au pire, offrez le choix du mode plein écran à l’aide d’un hyperlien.

La fonction suivante ouvre une page en mode plein écran dont l’adresse, le URL, est passée en paramètre. Que ce soit un hyperlien ou l’ouverture automatique, c’est la même fonction:

<script type="text/javascript" language="javascript">
<!-- Debut
  function twPleinEcran(nURL) {
  window.open(nURL, "", "fullscreen=yes, scrollbars=auto");
}
// Fin -->
</script>

Pour appeler la fonction il suffit d’un hyperlien:

<a href="#" onClick="twPleinEcran('page.htm');">Mode plein écran</a>

Si vous désirez que l’ouverture soit automatique, vous pouvez appeler la fonction via l’événement onload ajouté dans la balise <body>>. Noter que l’ouverture se fera automatiquement mais que la page qui active le mode plein écran restera en dessous de la nouvelle fenêtre ouverte.

<body onload="twPleinEcran('taPage.htm');">

 

Noter en terminant que vous devriez ajouter un bouton pour fermer la page

<a href="javascript:'window.close();'">Fermer la fenètre</a>

 

Code complet:

<html>
<head>
<script type="text/javascript" language="javascript">
<!-- Debut
  function twPleinEcran(nURL) {
    window.open(nURL,"", "fullscreen=yes, scrollbars=auto");
  }
// Fin -->
</script>
</head>

<body onload="twPleinEcran('taPage.htm');">
Si la page ne s’ouvre pas automatiquement, utiliser ce lien: <a href="#" onClick="twPleinEcran('page.htm');">Mode plein écran</a>
</body>
</html>

Trucs pour afficher le popup en « plein écran » sous Firefox, IE, Edge et Chrome

En ajoutant les paramètres width et height le PopUp s’ouvre en plein écran avec ces trois navigateurs. Malheureusement Firefox perd quelques pixels de cette manière. Toutefois, Firefox s’affiche en plein écran même si la fenêtre parente est plus petite que l’écran.

<script>
function twPleinEcran(nURL) {
  var nLargeurMax = window.screen.availWidth;
  var nHauteurMax = window.screen.availHeight;
  window.open(nURL,"", "fullscreen=yes, scrollbars=auto, left=0,top=0, width="+nLargeurMax+", height="+nHauteurMax);
}
</script> 

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • Bonjour, Bizarre, ça n'a pas l'air de marcher sur FireFox 37.0.1 Je me demande si ces fonctions n'ont pas été désactivées par js, pour ne pas ennuyer les internautes...? S.
    64x64
    stéphane
    Date (GMT) : 2015-04-14 14:8:9 (UTC +0000)
    • Salut, Un simple guillemet (') a été « francisé » (’) par le nouveau moteur. Un vieux texte qui n'a pas été revisité, chose faite. Note que Firefox demande une autorisation sinon les pop-ups peuvent être carrément bloqués. Merci.
      64x64
      oznog
      Date (GMT) : 2015-04-14 18:34:43 (UTC +0000)


    • Que doit-on remplacer par "nURL" et "" ? J'avoue que je ne suis pas un expert en javascript ni en compréhension et du coup je suis un peu bloqué...
      64x64
      Harry Cover
      Date (GMT) : 2017-11-26 09:18:58 (UTC +0000)
      Date local : Sun Nov 26 2017 10:19:29 GMT+0100 (CET)
      • Salut, Pas de problème, la programmation-objet n'est pas toujours facile à saisir. ATTENTION : CE CODE NE FONCTIONNE EFFECTIVEMENT PLUS selon la sécurité du navigateur. Tous les langages de programmation fonctionnent de la même manière. En principe, il ne faut rien changer dans la fonction. Mais le JavaScript est aussi capricieux : 1. En JavaScript, attention aux majuscules/minuscule, attention aux mots réservés (comme function, window, open etc). Et aux points virgule ; à la fin de chaque instruction. 2. La variable « nURL » contient une valeur transmise par un PARAMÈTRE que tu transmets à la fonction. Un PARAMÈTRE agit comme une variable. maFonction(monParametre); 3. En JavaScript, attention aux guillemets. Les deux sont possibles, tant ' que ". Tous dépens du contexte. Contrairement à une variable ou une valeur numérique qui n'a pas besoin de guillemets : maFonction(maVariable); / maFonction(222);, une valeur passée par une « chaine de caractère » par un paramètre doit impérativement être entourée de guillemets. maFonction('ma valeur'); Ou tu utilises une variable : var maVariable = "ma valeur"; maFonction(maVariable); Dans ce cas-ci, le paramètre est l'adresse de la page : twPleinEcran('adresse de ta page entre guillemets'); Par exemple twPleinEcran('page.html'); ou twPleinEcran('http://www.trucsweb.com/'); 4. Ensuite, l’appel de la fonction qui doit activé de façon ou d'une autre. Directement dans la page, à l'aide d'un bouton, mais aussi via un évènement comme l'exemple précédent, dès que la page s'ouvre : // Évènement « onload » <body onload="twPleinEcran('http://www.trucsweb.com');"> // Dans un bouton qui ouvre encore une fenêtre <a href="#" onClick="twPleinEcran('http://www.trucsweb.com');">Mode plein écran</a> Enfin, il existe maintenant une autre manière d'ouvrir une page en plein écran, moyennant l'autorisation de l'internaute. J'ai ajouté des références dans le tutoriels.
        64x64
        oznog
        Date (GMT) : 2017-11-26 13:09:01 (UTC +0000)
        Date local : Sun Nov 26 2017 08:09:35 GMT-0500 (Est)


      Ajouter un commentaire
      Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
      Votre évaluation du tutoriel

             Visites : 37711 - Pages vues : 99438
      X

      Trucsweb.com Connexion

      Connexion

      X

      Trucsweb.com Mot de passe perdu

      Connexion

      X

      Trucsweb.com Conditions générales

      Conditions

      Responsabilité

      La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

      Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

      Droit applicable et juridiction compétente

      Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Glossaire

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Trucsweb

      Conditions

      Aucun message!

      Merci.

      X
      Aucun message!
      X

      Trucsweb.com Créer un compte

      Créer un compte

      .
      @