Comment rediriger vers une URL relative en JavaScript?

Comment rediriger vers une URL relative en JavaScript?
Rediriger un utilisateur vers différentes pages Web en fonction de ses actions est essentielle pour apprendre en JavaScript. Cependant, les nouveaux débutants confondent souvent la redirection vers un URL et rediriger vers une URL relative. Cependant, le processus de redirection n'est pas du tout différent, mais la signification des termes est très différente.

Rediriger vers une URL normale signifie envoyer l'utilisateur à une URL quelle que soit cette URL ou où elle est placée. Diriger vers une URL relative signifie rediriger l'utilisateur vers une page Web placée dans le même répertoire que la page parent ou la page d'accueil. Les URL relatives peuvent également être utilisées pour rediriger vers les fichiers placés dans d'autres répertoires, mais l'URL relative ne contiendrait que le chemin et aucune autre information comme le domaine.

Cet article expliquera deux méthodes différentes pour rediriger les utilisateurs vers des URL relatives, mais avant cela, configurez rapidement deux pages Web différentes en utilisant les étapes ci-dessous:

Configuration des deux documents HTML

Créer un nouveau document HTML nommé maison Et mettez les lignes suivantes à l'intérieur:


C'est la première page!

Cela affichera la page Web suivante sur le navigateur:

Après cela, créez un autre document HTML dans le même répertoire (c'est important pour en faire une URL relative) et le nommer comme deuxième page.html. Après cela, tapez les lignes suivantes dans la deuxième page.HTML:


C'est la deuxième page



Je suis dans le même répertoire que chez moi.html

Exécuter la deuxième page.HTML dans le navigateur Web donne le résultat suivant:

La configuration des pages Web est effectuée. Passons aux deux méthodes différentes pour la redirection relative de l'URL.

Méthode 1: Utilisation de l'objet Window pour rediriger vers une URL relative

Dans le fichier de script attaché à la maison.page Web HTML, créez la fonction suivante:

fonction boutonClicked ()
// les lignes suivantes entrent dans ce corps

À l'intérieur de cette fonction, utilisez le fenêtre Objet pour accéder à sa propriété de localisation, et à partir de celle qui accéde au HREF et égal au chemin de la deuxième page.html. Puisqu'il s'agit d'une URL relative (les deux pages Web sont dans le même répertoire), définissez simplement le HREF sur le nom de la deuxième page Web, qui est deuxième page.html. La fonction ressemblera à ceci:

fonction boutonClicked ()
fenêtre.emplacement.href = "secondpage.html ";

Courir la maison.HTML sur un navigateur Web, puis observez la fonctionnalité suivante:

Depuis la sortie, il est clair qu'appuyé sur le bouton redirige l'utilisateur vers la deuxième page.HTML utilisant son URL relative

Méthode 2: Utilisation de l'objet document pour rediriger vers une URL relative

Commencez à nouveau à créer la fonction créée dans la méthode 1 avec les lignes suivantes:

fonction boutonClicked ()
// les lignes suivantes entrent dans ce corps

Dans cette fonction, au lieu de l'objet de fenêtre, cette fois-ci en utilisant l'objet document pour accéder à l'objet de localisation. Et puis, à partir de l'objet de localisation, accédez à la propriété HREF et définissez-le égal au chemin relatif de la deuxième page.html. Depuis le deuxième page est dans le même répertoire, le chemin relatif ne serait que le nom de la deuxième page Web, qui est la «Secondpage.html ”

fonction boutonClicked ()
document.emplacement.href = "secondpage.html ";

Courir la maison.HTML sur un navigateur Web, puis observez la fonctionnalité suivante:

Il est clair que l'utilisateur a été redirigé vers la seconde en utilisant le parent de la deuxième page à l'aide de JavaScript.

Conclure

L'utilisateur peut être redirigé vers une autre page Web à l'aide d'une URL relative en utilisant soit le document.emplacement.href propriété ou le fenêtre.emplacement.href propriété et définition de leur valeur égale à l'URL relative de la deuxième page Web. Dans cet article, ces deux méthodes ont été démontrées à l'aide d'un exemple étape par étape.