ES6 - Redirection de page
Redirectest un moyen d'envoyer à la fois les utilisateurs et les moteurs de recherche vers une URL différente de celle qu'ils avaient initialement demandée. La redirection de page est un moyen de rediriger automatiquement une page Web vers une autre page Web. La page redirigée se trouve souvent sur le même site Web, ou peut être sur un autre site Web ou sur un serveur Web.
Redirection de page JavaScript
window.location and window.location.href
En JavaScript, vous pouvez utiliser de nombreuses méthodes pour rediriger une page Web vers une autre. Presque toutes les méthodes sont liées àwindow.locationobjet, qui est une propriété de l'objet Window. Il peut être utilisé pour obtenir l'adresse URL actuelle (adresse Web) et pour rediriger le navigateur vers une nouvelle page. Les deux usages sont les mêmes en termes de comportement.window.locationrenvoie un objet. Si.href n'est pas défini, window.location par défaut pour changer le paramètre .href.
Exemple
<!DOCTYPE html>
<html>
<head>
<script>
function newLocation() {
window.location = "http://www.xyz.com";
}
</script>
</head>
<body>
<input type = "button" value = "Go to new location" onclick = "newLocation()">
</body>
</html>location.replace()
L'autre méthode la plus fréquemment utilisée est la replace()méthode de l'objet window.location, il remplacera le document actuel par un nouveau. Dans la méthode replace (), vous pouvez passer une nouvelle URL à la méthode replace () et elle effectuera une redirection HTTP.
Voici la syntaxe pour le même.
window.location.replace("http://www.abc.comlocation.assign()
La méthode location.assign () charge un nouveau document dans la fenêtre du navigateur.
Voici la syntaxe pour le même.
window.location.assign("http://www.abc.org");assign() vs. replace()
La différence entre les méthodes assign () et replace () est que la méthode location.replace () supprime l'URL actuelle de l'historique du document, de sorte qu'elle ne peut pas revenir au document d'origine. Vous ne pouvez pas utiliser le bouton "Retour" du navigateur dans ce cas. Si vous souhaitez éviter cette situation, vous devez utiliser la méthode location.assign (), car elle charge un nouveau document dans le navigateur.
location.reload()
La méthode location.reload () recharge le document actuel dans la fenêtre du navigateur.
Voici la syntaxe pour le même.
window.location.reload("http://www.yahoo.com");window.navigate()
La méthode window.navigate () est similaire à l'attribution d'une nouvelle valeur à la propriété window.location.href. Comme il n'est disponible que dans MS Internet Explorer, vous devez donc éviter de l'utiliser dans le développement multi-navigateurs.
Voici la syntaxe pour le même.
window.navigate("http://www.abc.com");Redirection et optimisation des moteurs de recherche
Si vous souhaitez informer les moteurs de recherche (SEO) de votre transfert d'URL, vous devez ajouter la balise meta rel = "canonical" à la partie principale de votre site Web, car les moteurs de recherche n'analysent pas JavaScript pour vérifier la redirection.
Voici la syntaxe pour le même.
<link rel = "canonical" href = "http://abc.com/" />