FAQ JavaScript
FAQ JavaScriptConsultez toutes les FAQ
Nombre d'auteurs : 43, nombre de questions : 176, dernière mise à jour : 29 août 2021
Sommaire→La gestion des fenêtres et des frames- Comment ouvrir une pop-up ?
- Comment mettre à jour ou exécuter une fonction dans une fenêtre à partir d'une pop-up ?
- Comment fermer une fenêtre ?
- Comment ouvrir une fenêtre pop-up qui restera au dessus des autres fenêtres ?
- Comment ouvrir une fenêtre avec le contenu d'un répertoire ?
- Comment centrer une pop-up ?
- Comment savoir si une fenêtre est ouverte ou pas ?
- Comment redimensionner une fenêtre ?
- Comment réduire une fenêtre dans la barre des tâches par le code ?
- Comment supprimer la toolbar de la page active ?
- Comment ouvrir une fenêtre en plein écran ?
- Comment quitter le mode plein écran ?
- Comment fermer une fenêtre et recharger la page mère ?
- Comment mettre à jour une frame à partir d'une autre frame ?
- Comment changer le titre de la page au changement d'une frame ?
Lorsque l'on arrive sur certains sites, on est souvent submergé par l'ouverture intempestive de pop-up qui nous mettent de mauvais poil pour
toute la journée !!!
À partir de maintenant, vous allez tout connaître sur ces pop-up...
window.open("page.htm","PopUp",
"width=500,height=350,location=no,status=no,toolbar=no,scrollbars=no");
Si l'on met ce code dans l'événement onload de la balise <body>, dès le chargement de la page HTML, une pop-up s'ouvrira.
Caractéristiques de la pop-up :
- elle contient le contenu de la page "page.htm" ;
- elle a pour nom "PopUp" ;
- le dernier attribut donne les caractéristiques de la fenêtre :
- width : la largeur de la fenêtre (ici 500 pixels)
- height : la hauteur de la fenêtre (ici 350 pixels)
- location : contrôle l'affichage de la barre d'adresse (ici no, pas de barre d'adresse)
- statut : contrôle l'affichage de la barre de statut (ici no, pas de barre de statut)
- toolbar : contrôle l'affichage de la barre d'outils (ici no, pas de barre d'outils)
- scrollbars : Contrôle l'affichage des ascenseurs (ici no, pas de barre d'ascenseur)
- left : la position horizontale sur l'écran (en pixels)
- top : la position verticale sur l'écran (en pixels)
- fullscreen : ouverture de la fenêtre en plein écran (IE > 5 seulement)
- resizable : permet ou non de redimensionner la fenêtre (yes/no)
De nombreux paramètres possibles pour l'ouverture des pop-up ont été désactivés sur les versions récentes des navigateurs, notamment celles qui sont supposées relever du choix de l'utilisateur et non du développeur.
Certaines fois, il est utile de modifier ou d'exécuter des fonctions depuis une pop-up ouverte depuis une fenêtre mère.
opener.location.replace('page.html');Si vous voulez recharger la page mère :
opener.location.reload();Pour exécuter une méthode utilisateur sur la fenêtre mère :
opener.maFonction();Attention : lorsque vous échangez des données entre une popup et sa page mère, il est important de vérifier l'existence de la page mère. En effet, rien ne vous assure que l'utilisateur n'a pas navigué ni fermé cette dernière !
if(self.opener){
// instructions
}Pour un pop-up :
<a href="#" onclick="window.close();">Fermer</a>Pour un fenêtre classique (pour éviter la boîte de dialogue) :
<a href="#" onclick="opener=self;self.close();">fermer</a>Remarque : dans Firefox, il est impossible pour un script de fermer une fenêtre ouverte par l'utilisateur (par opposition à une fenêtre ouverte par un script).
Dans certains cas, on a besoin d'afficher une fenêtre modale, c'est-à-dire une fenêtre que l'internaute est obligé de fermer s'il veut continuer
sa navigation.
Par conséquent, tant que l'internaute n'aura pas fermé cette fenêtre, elle restera par dessus toutes les autres.
window.showModalDialog("page.html",null,
"dialogWidth:430px;dialogHeight:280px;center:1;scroll:0;help:0;status:0");Les deux premiers paramètres correspondent aux mêmes paramètres que pour ouvrir une pop-up.
Par contre, il y a du changement dans les caractéristiques mais cela reste sensiblement équivalent.
Cependant, il ne faut pas s'y mélanger les pinceaux sinon, ça ne marche pas !
Pour ouvrir une fenêtre affichant le contenu d'un répertoire, il suffit de faire :
<script type="text/javascript">
url="file:\\c:/";
window.open(url);
</script>Cette astuce ne fonctionne qu'avec IE6 et précédents !
Voici le code pour une pop-up :
<script type="text/javascript">
function openwindows()
{
window.open("ipage.html", "",
"width=460,height=150,scrollbars=0,left=" +
((screen.width - 460)/2) + ",top=" + ((screen.height - 150)/2) );
}
</script>Et voici le code pour une fenêtre modale (valable uniquement pour IE) :
window.showModalDialog("page.html",null,
"dialogWidth:460px;dialogHeight:150px;center:1;scroll:0;help:0;status:0");window.resizeTo(Largeur, Hauteur);Mauvaise nouvelle : c'est impossible en JavaScript Bonne nouvelle on peut facilement le simuler comme suit :
var show=1;
function minimize(){
moveBy(4000,4000);
show=0;
}
function reshow(){
if(show==0){
moveBy(-4000,-4000);
show=1;
}
}il suffit de déplacer la fenêtre hors du champ visible, exemple :
L'astuce consiste à passer par un pop-up pour lequel on peut définir les paramètres:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>No tool bar</title>
<script type="text/javascript">
function notoolbar(){
if(window.name!='nouveau'){
window.open(window.top.location.href,'nouveau',
'width='+(parseInt(screen.width)-10)+',height='+screen.height+
',top=0,left=0,toolbar=no') ;
window.opener=self;
self.close() ;
}
}
</script>
</head>
<body onload="notoolbar()">hello !!! </body>
</html>Attention ce code ne fonctionne pas sous NS ni FF.
Pour IE, il existe un attribut lors de l'ouverture des pop-ups qui peut préciser que la fenêtre doit être ouverte en plein écran : fullscreen=1.
Pour les autres navigateurs, ce code peut faire l'affaire :
var fen = window.open('fenetre1.html','',
'toolbar=0, location=0, directories=0, status=0, scrollbars=1, resizable=1,
copyhistory=0, menuBar=0,fullscreen=0');
fen.moveTo(0,0);
fen.resizeTo(screen.width,screen.height);Avec la venue du HTML5 et le fait de pouvoir mettre une vidéo (sans Flash) en fullscreen, les navigateurs commencent doucement à proposer des API pour faire du plein écran. Là où le W3C parle de la méthode requestFullscreen() avec un "s" minuscule à "screen", les navigateurs parlent de mozRequestFullScreen() et webkitRequestFullScreen() avec un "S" majuscule à "Screen" :
var elem = document.documentElement; //Ou par exemple la vidéo à mettre en plein écran
if(elem.requestFullscreen) {
elem.requestFullscreen();
} else if(elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if(elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
}Par mesure de sécurité, les navigateurs bloquent le lancement du fullscreen au chargement de la page. Son affichage n'est possible que lors d'une action voulue par l'utilisateur (par exemple un clic). De plus, ces instructions ne sont pas toujours compatibles avec les anciennes versions des navigateurs. IE n'implémente d'ailleurs pas encore cette technique.
Avec la venue du HTML5 et le fait de pouvoir mettre une vidéo (sans Flash) en fullscreen, les navigateurs commencent doucement à proposer des API pour quitter le mode plein écran. Le W3C évoque la méthode exitFullscreen ("s" minuscule) tandis que les navigateurs implémentent les méthodes mozCancelFullScreen() ou webkitCancelFullScreen() ("S" majuscule). Ces méthodes s'appellent sur le document :
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}Ces instructions ne sont pas toujours compatibles avec les anciennes versions des navigateurs. IE n'implémente d'ailleurs pas encore cette technique.
Pour recharger le même document qui se trouve actuellement dans un cadre, on utilise la méthode reload() de l'objetLocation.
cadre.location.reload();Lorsqu'il s'agit du document dans lequel se trouve le JavaScript, cadre est à remplacer par le mot-clé window ou bienself. Lorsque l'on se trouve dans un jeu de cadres (frameset), pour mettre à jour le cadre A (cadreA) depuis le cadre B (cadreB), on va écrire :
parent.frames['cadreA'].location.reload();Si l'on veut changer le document et non faire un simple reload, on va utiliser la méthode replace plutôt quereload.
parent.frames['cadreA'].location.replace('autrepage.htm');Il faut pour cela rajouter un événement onclick dans le lien ayant fait le changement dans la frame :
<a href="lien.htm" target="maframe" onclick="top.document.title = 'nouveau titre'">monlien</a>