IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

FAQ JavaScriptConsultez toutes les FAQ

Nombre d'auteurs : 43, nombre de questions : 175, dernière mise à jour : 6 décembre 2013 

 
OuvrirSommaireLa gestion des fenêtres et des frames

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...

 
Sélectionnez
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.

Mis à jour le 4 novembre 2013  par simone.51, denisC, Bovino

Certaines fois, il est utile de modifier ou d'exécuter des fonctions depuis une pop-up ouverte depuis une fenêtre mère.

 
Sélectionnez
opener.location.replace('page.html');

Si vous voulez recharger la page mère :

 
Sélectionnez
opener.location.reload();

Pour exécuter une méthode utilisateur sur la fenêtre mère :

 
Sélectionnez
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 !

 
Sélectionnez
if(self.opener){
	// instructions
}
Mis à jour le 17 octobre 2009  par simone.51, Bovino

Pour un pop-up :

 
Sélectionnez
<a href="#" onclick="window.close();">Fermer</a>

Pour un fenêtre classique (pour éviter la boîte de dialogue) :

 
Sélectionnez
<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).

Mis à jour le 3 janvier 2006  par BrYs, denisC

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.

 
Sélectionnez
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 !

Mis à jour le 21 janvier 2004  par simone.51

Pour ouvrir une fenêtre affichant le contenu d'un répertoire, il suffit de faire :

 
Sélectionnez
<script type="text/javascript">
     url="file:\\c:/";
     window.open(url);
</script>

Cette astuce ne fonctionne qu'avec IE6 et précédents !

Créé le 26 août 2003  par simone.51

Voici le code pour une pop-up :

 
Sélectionnez
<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) :

 
Sélectionnez
window.showModalDialog("page.html",null,
"dialogWidth:460px;dialogHeight:150px;center:1;scroll:0;help:0;status:0");
Créé le 21 janvier 2004  par simone.51
 
Sélectionnez
<script type="text/javascript">
    function TestFenetre() {
        if(nom_Fenetre.closed == false) {
            // la fenêtre est ouverte
        }
        else{
            // la fenêtre est fermée
        }
    }
</script>
Créé le 22 janvier 2004  par simone.51
 
Sélectionnez
window.resizeTo(Largeur, Hauteur);
Créé le 23 septembre 2004  par simone.51

Mauvaise nouvelle : c'est impossible en JavaScript Bonne nouvelle on peut facilement le simuler comme suit :

 
Sélectionnez
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 :

 
Sélectionnez
<body onfocus="reshow()">
<input type="button" value="coucou" onclick="minimize()" />
</body>
Créé le 23 septembre 2004  par SpaceFrog, simone.51

L'astuce consiste à passer par un pop-up pour lequel on peut définir les paramètres:

 
Sélectionnez
<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.

Créé le 23 septembre 2004  par SpaceFrog

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 :

 
Sélectionnez
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" :

 
Sélectionnez
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.

Mis à jour le 22 mai 2012  par simone.51, Bisûnûrs, Bovino

Lien : Comment quitter le mode plein écran ?

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 :

 
Sélectionnez
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.

Créé le 22 mai 2012  par Bisûnûrs, Bovino

Lien : Comment ouvrir une fenêtre en plein écran ?

 
Sélectionnez
opener.location.reload();
self.close();
Créé le 19 avril 2006  par BrYs

Lien : Exemple d'utilisation de ce script

Pour recharger le même document qui se trouve actuellement dans un cadre, on utilise la méthode reload() de l'objetLocation.

recharger un cadre
Sélectionnez
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 :

recharger un cadre dans un frameset
Sélectionnez
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.

modifier l'emplacement un cadre dans un frameset
Sélectionnez
parent.frames['cadreA'].location.replace('autrepage.htm');
Créé le 19 avril 2006  par Jérôme

Il faut pour cela rajouter un événement onclick dans le lien ayant fait le changement dans la frame :

Changer de titre lors du rechargement d'une frame
Sélectionnez
<a href="lien.htm" target="maframe" onclick="top.document.title = 'nouveau titre'">monlien</a>
Créé le 31 octobre 2006  par BrYs
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.