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>
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](http://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](http://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](http://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!
AbuseIPDB
Connexion