L'objet window - Cours Javascript

Introduction

Info

L'objet window (fenêtre) est l'objet le plus haut de la hiérarchie javascript.

window.status

Info

La propriété javascript status de l'objet window permet d'afficher un texte dans la barre basse du navigateur ou barre de statut.
Exemple :
Taper dans le générateur :
Exemple de code :
window.status="Vous êtes sur le site de DMC";

Pour supprimer le texte dans la barre des statuts :
Exemple de code :
window.status="";

Dans la partie Divers > Codes sources vous avez des exemples de scripts.

window.location

Info

La propriété javascript location de l'objet window permet de récupérer l'url complète de la page en cours.
Vous pouvez aussi modifier cette dernière.

Exemple :
Nous allons créer un bouton pour charger une autre page.
Dans la balise HTML ou XHTML script :
Exemple de code :
function change(){
  window.location="../index.html";
}

Dans la balise HTML ou XHTML body :
Exemple de code :
<form>
<input type="button" value="changer" onclick="change()">
</form>

window.moveTo()

Info

La méthode javascript moveTo(x,y) de l'objet window permet de déplacer la fenêtre.

La méthode javascript moveTo(x,y) accepte comme paramètres :
- x, position horizontale en pixel.
- y, position verticale en pixel.
x, y sont les coordonnées sur lesquelles le coin haut gauche de la fenêtre va se positionner.

Exemple :
Nous allons créer un bouton pour déplacer la fenêtre.
Dans la balise HTML ou XHTML script :
Exemple de code :
function change(){
  window.moveTo(0,-10);
}

Dans la balise HTML ou XHTML body :
Exemple de code :
<form>
  <input type="button" value="changer" onclick="change()">
</form>

Exemple : cliquez ici

window.moveBy()

Info

La méthode javascript moveBy(x,y) de l'objet window permet de déplacer la fenêtre.

La méthode moveBy(x,y) javascript accepte comme paramètres :
- x, valeur de type Number positive ou négative en pixel.
- y, valeur de type Number positive ou négative en pixel.
x, y sont le nombre de pixels dont va se déplacer le coin haut gauche de la fenêtre.

Exemple :
Nous allons créer un bouton pour déplacer la fenêtre.
Dans la balise HTML ou XHTML script :
Exemple de code :
function change(){
window.moveBy(-10,10);
}

Dans la balise HTML ou XHTML body :
Exemple de code :
<form>
  <input type="button" value="changer" onclick="change()">
</form>

Exemple : cliquez ici

window.resizeBy()

Info

La méthode javascript resizeBy(x,y) de l'objet window permet de redimensionner la fenêtre.

La méthode resizeBy(x,y) javascript accepte comme paramètres :
- x, valeur de type Number positive ou négative en pixel.
- y, valeur de type Number positive ou négative en pixel.
x,y sont le nombre de pixels qui vont être rajoutés à la taille actuelle de la fenêtre.

Exemple :
Nous allons créer un bouton pour redimensionner la fenêtre.
Dans la balise HTML ou XHTML script :
Exemple de code :
function change(){
  window.resizeBy(-10,10);
}

Dans la balise HTML ou XHTML body :
Exemple de code :
<form>
  <input type="button" value="changer" onclick="change()">
</form>

Exemple : cliquez ici

window.resizeTo().

Info

La méthode javascript resizeTo(x,y) de l'objet window permet de redimensionner la fenêtre.

La méthode resizeTo(x,y) javascript accepte comme paramètres :
- x, valeur de type Number positive ou négative en pixel.
- y, valeur de type Number positive ou négative en pixel.
x, y sont la quantité de pixels à ajouter à la longueur et la quantité à ajouter à la hauteur.

Exemple :
Nous allons créer un bouton pour redimensionner la fenêtre.
Dans la balise HTML ou XHTML script :
Exemple de code :
function change(){
  window.resizeTo(250,250);
}

Dans la balise HTML ou XHTML body :
Exemple de code :
<form>
  <input type="button" value="changer" onclick="change()">
</form>

Exemple : cliquez ici

window.blur().

Info

La méthode javascript window.blur() de l'objet window permet de positionner la fenêtre en arrière plan.

Exemple :
Nous allons créer un bouton pour mettre en arrière plan la fenêtre.
Dansla balise HTML ou XHTML script :
Exemple de code :
function change(){
  window.blur();
}

Dans la balise HTML ou XHTML body :
Exemple de code :
<form>
  <input type="button" value="changer" onclick="change()">
</form>

window.focus().

Info

La méthode javascript focus() de l'objet window permet de positionner la fenêtre en premier plan.

Exemple :
Nous allons créer un bouton pour mettre la fenêtre en premier plan.
Dans la balise HTML ou XHTML script :
Exemple de code :
function change(){
  window.focus();
}

Dans la balise HTML ou XHTML body :
Exemple de code :
<form>
  <input type="button" value="changer" onclick="change()">
</form>

window.open().

Info

La méthode javascript open() de l'objet window permet d'ouvrir une nouvelle fenêtre (pop up) avec des dimensions précises, et sans barres de navigation.
Cette fenêtre peut être une page HTML toute faite ou une page créée sur le moment même, la page créée par le générateur en est un exemple.

Comment déclarer une nouvelle fenêtre :
Exemple de code :
var Nom_fenetre = window.open("_page.html", "cible", "width=100, height=100, _les_autres_attributs");

La page html ou l'URL :
Si vous voulez ouvrir une fenêtre virtuelle ne mettez rien à l'emplacement de la page :
Exemple de code :
var Nom_fenetre = window.open("", "cible", "width=100, height=100, _les_autres_attributs");

La cible :
Si vous voulez ouvrir une fenêtre dans un jeu de frame mettez le nom de la frame, (équivalent à l'attribut target de la balise <A>):
Exemple de code :
var Nom_fenetre = window.open("_page.html", "cible", "width=100, height=100, _les_autres_attributs");

La taille :
Si vous voulez une taille précise en pixel mettez la dans width et height taille minimum acceptée 100 :
Exemple de code :
var Nom_fenetre = window.open("_page.html", "cible", "width=200, height=200, _les_autres_attributs");
Si vous ne voulez pas de taille précise ne mettez pas ces attributs mais attention tous les autres attributs prennent la valeur true (1):
Exemple de code :
var Nom_fenetre = window.open("_page.html", "cible");


Fonctionne comme la méthode javascript document.open() : l'objet document.

Voir le chapitre réservé aux Pop up.

Les autres attributs

Ils prennent la valeur de 0 pour false et 1 pour true .
si vous ne mettez pas d'attributs, cela revient à mettre tous les autre attributs à false (0) :
Exemple de code :
var Nom_fenetre = window.open("_page.html", "cible", "width=200, height=200");

toolbar :
Pour Internet explorer, c'est la barre où se trouvent les icônes précédente, suivante,...
location :
C'est la barre qui affiche l'url. directories : pour Internet explorer, c'est la barre qui se nomme lien.
status :
C'est la parie basse de la fenêtre où l'on voit le chargement.
menubar :
Pour netscape, barre qui contient les menus (afficher, édition,...)
scrollbars :
Définit si il faut des barres de défilement.
resizable :
Si la fenêtre peut être redimensionnée, elle peut être seulement redimensionnée à la taille de l'écran.

Soit :
Exemple de code :
var Nom_fenetre = window.open("_page.html" ,"cible" ,"width=200, height=200, resizable=1, scrollbars=1, menubar=1, status=1, location=1, toolbar=1");

window.close().

Info

La méthode javascript close() de l'objet window permet de fermer une fenêtre.

Comment fermer une fenêtre :
S'il s'agit d'une fenêtre ouverte normalement, une boite de dialogue de confirmation s'ouvre avec ce type de texte "Voulez vous fermer cette fenêtre ?"
Exemple de code :
window.close();

Sinon la fenêtre se ferme sans boite de dialogue.
Exemple de code :
window.Nom_fenetre.close();

Exemple :
Nous avons deux pages HTML. Dans la première trois boutons :
- le premier ferme la fenêtre dans laquelle il se trouve.
Exemple de code :
function fermefp(){
  window.close();
}

- le second ouvre une page html (code1.html dans laquelle se trouve un bouton qui ferme la fenêtre dans laquelle il se trouve)
Exemple de code :
var fe;
function ouver(){
  fe=window.open("close1.html", "fen", "width=350, height=200");
}

- le troisième ferme la page ouverte avec le bouton N°2
Exemple de code :
function ferme(){
  window.fe.close();
}

Exemple : l'exemple
Chapitre l'objet navigator
Chapitre l'objet document