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.

Partagez cet article Partager sur Twitter Partager sur Facebook Partager sur Linkedin Partager sur Google+ Envoyer par mail

Florian Burnel

Co-Fondateur d’IT-Connect, je souhaite partager mes connaissances et expériences avec vous, et comme la veille techno’ est importante je partage aussi des actus.

florian a publié 1610 articles sur IT-Connect.See all posts by florian

Une réaction sur “Ouvrir une URL en JavaScript avec l’objet window

  • 29/12/2013 à 19:59
    Permalink

    Bonjour

    Ma question va paraitre un peut con

    J’utilise Hype pour faire mon interface web (domotique) pour controler les eclairage
    par exemple pour que la lumiere change d’etat je peut executer dans mon navigateur http://192.168.0.180/WRITEPI?ADR1=MW2&VALUE1=5&FORMAT1=%x

    Donc Hype permet de creer des bouton qui vont executer des script java

    donc dans le script de mon bouton pour la lumiere je met

    window.location.href = « http://192.168.0.180/WRITEPI?ADR1=MW2&VALUE1=5&FORMAT1=%x »;

    La lumiere s’allume bien mais je suis renvoyer ver la page correspondant a l’url qui en fait n’existe pas

    Je souhaiterai savoir si vous savez comment faire un equivalent mais sans ouvrir de page

    Merci de votre aide

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *