Ouvrir une URL en JavaScript avec l’objet window

I. Présentation

Vous connaissez surement les liens HTML grâce à la balise <A>  et son attribut « HREF » où l’on indique l’URL du lien à suivre en cas de clique sur l’élément <A>. Cependant, grâce au JavaScript il est possible d’effectuer une redirection de la page en cours vers une autre page ou de l’ouverture d’une page dans une nouvelle fenêtre, selon un événement précis (clique sur une image, passage de la souris sur une image,…).

Pour cela il faut utiliser l’attribut « href » du sous-objet « location », qui est un objet de « window », qui permet de rediriger l’utilisateur vers la page indiquée en valeur de l’attribut, ou bien alors utiliser le sous-objet « open » de l’objet « window » qui permet d’ouvrir l’URL passée en paramètre dans une nouvelle fenêtre de navigateur.

II. Ouvrir une URL

Comme je l’ai dis ci-dessus, window.location.href permet une redirection de la page en cours vers l’URL précisée en paramètre, cela s’écrit de la manière suivante :

window.location.href="http://votre_url"

Puis par exemple si vous souhaitez que la redirection se fasse lorsque l’utilisateur clique sur une image, faites ceci :

<img src='lien_vers_image' onClick=’window.location.href=”http://votre_url"'>

Vous pouvez modifier l’événement onClick par un autre événement si vous le souhaitez, cela dépend de votre besoin. Le fait de mettre onClick revient à cliquer sur une image « entourée » par une balise <A>.

III. Ouvrir une URL dans une nouvelle fenêtre

La seconde partie de ce  tutoriel consiste à voir comment ouvrir une URL dans une nouvelle fenêtre de navigateur en utilisant window.open qui s’écrit de la manière suivante :

window.open("http://votre_url","nom_de_la_fenetre","options_nouvelle_fenetre");

En options pour la nouvelle fenêtre vous pouvez définir différents paramètres tels que la largeur (width), la hauteur (height), si la fenêtre est redimensionnable (resizable), afficher la barre de menu (menubar), etc…

Exemple :

window.open("http://votre_url","nom_de_la_fenetre","menubar=no, status=no, width=100px");

Si vous souhaitez ouvrir une URL dans une nouvelle fenêtre lors d’un clique sur une image cela donnera :

<img src=’lien_vers_image’ onClick=’window.open("http://votre_url","nom_fenetre","options_fenetre");'>

Note : Si vous utilisez window.open sans indiquer le nom de la fenêtre et les paramètres elle s’ouvrira dans un nouvel onglet et non dans une nouvelle fenêtre.