En JavaScript, nous pouvons utiliser l'objet window.location pour forcer une page à charger une autre page. Nous pouvons utiliser l'objet location pour définir l'URL de la nouvelle page. Il existe différentes méthodes - propriété window.location.href, méthodes window.location.assign() et window.location.replace() pour définir l'URL d'une nouvelle page à l'aide de l'objet location. Nous discuterons de chaque propriété et méthode en détail dans ce didacticiel.
Fenêtre.Position.Remplacer
La première méthode consiste à utiliser la propriété window.location.href. Cette propriété contient des informations sur l'URL actuelle de la page et peut être utilisée pour rediriger l'utilisateur vers une nouvelle page.
Grammaire
window.location.href = "new_url";
Copier après la connexion
L'utilisateur sera immédiatement redirigé vers l'URL spécifiée (new_url).
Pour rediriger l'utilisateur après un délai spécifié, nous pouvons également spécifier la fonction setTimout, qui permet à l'utilisateur d'être redirigé vers l'URL source après le délai spécifié dans la fonction.
setTimeout(function() {
window.location.href = "https://www.tutorialspoint.com";
}, 3000);
Copier après la connexion
L'exemple ci-dessus redirigera l'utilisateur vers l'URL donnée (https://www.tutorialspoint.com) après 3 secondes.
Exemple
Dans cet exemple, nous avons défini un bouton (Load) qui, lorsqu'il est cliqué, affiche une fonction forceLoad(). Dans la fonction forceLoad(), nous utilisons la propriété window.location.href pour recharger la nouvelle page - page d'accueil de tutorielspoint.
<html>
<body>
<h2>Forced Load page using window.location.href property</h2>
<p>Click on the below button to force reload new page</p>
<button onclick="forceLoad()">Load</button>
<script>
function forceLoad() {
window.location.href = "https://www.tutorialspoint.com";
}
</script>
</body>
</html>
Copier après la connexion
Fenêtre.Position.Remplacer
Une autre façon de forcer une redirection vers une autre page consiste à utiliser la propriété window.location.replace. Cette méthode permet de remplacer la page actuelle de l'historique du navigateur par une autre page, mais l'utilisateur ne pourra alors pas revenir à la page d'origine.
Grammaire
window.location.replace("new_url");
Copier après la connexion
Dans cette syntaxe, nous obtiendrons le même effet que l'exemple window.location.href, mais la différence ici est que la page actuelle de l'utilisateur ne sera pas stockée dans l'historique du navigateur.
Exemple
Dans cet exemple, nous avons défini un bouton (Load) qui, lorsqu'il est cliqué, affiche une fonction forceLoad(). La fonction forceLoad() restitue une méthode JavaScript - location.replace() qui remplace la source actuelle par la source à l'URL fournie dans la fonction.
Veuillez noter qu'une fois la navigation effectuée, elle ne permet pas à l'utilisateur de revenir à la page précédente, ce qui est possible avec la propriété location.assign() en javascript.
<html>
<body>
<h2>Forced Load page using window.location.replace() method</h2>
<p>Click below button force reload new page</p>
<button onclick="forceLoad()">Load</button>
<script>
function forceLoad() {
window.location.replace("https://www.tutorialspoint.com");
}
</script>
</body>
</html>
Copier après la connexion
Fenêtre.Position.Assignment
Dans cette méthode, nous utilisons la méthode window.location.assign qui est utilisée pour ajouter une nouvelle page à l'historique du navigateur afin que l'utilisateur puisse revenir à la page d'origine qu'il a parcourue.
Grammaire
window.location.assign("new_url");
Copier après la connexion
Dans cette syntaxe, cela aura le même effet que l'exemple window.location, mais la différence ici est que la page actuelle de l'utilisateur sera stockée dans l'historique du navigateur.
Exemple
Dans cet exemple, nous avons défini un bouton (Load) qui, lorsqu'il est cliqué, affiche une fonction forceLoad(). La fonction ForceLoad() restitue la méthode JavaScript location.assign(), qui provoque le chargement et l'affichage par la fenêtre du document ou de la page à l'URL actuellement spécifiée. Une fois la navigation effectuée, cela permet également à l'utilisateur de revenir à la page précédente à l'aide d'une propriété appelée Location.assign() en appuyant simplement sur le bouton « retour » du navigateur.
<html>
<body>
<h2>Window.location.assign() method</h2>
<button onclick="forceLoad()">Load</button>
<script>
function forceLoad() {
location.assign("https://www.tutorialspoint.com");
}
</script>
</body>
</html>
Copier après la connexion
La différence entre window.location, window.location.replace et window.location.assign
| Bases |
window.location.href |
fenêtre.emplacement.affectation |
Fenêtre.Position.Remplacer |
| Définition |
Il obtient l'URL actuelle et redirige vers le nouveau document ou la nouvelle page spécifiée par l'URL. |
Il charge et affiche le document ou la page spécifié dans l'URL. |
Il remplace la page actuelle par la page spécifiée dans l'URL. |
| Historique du navigateur |
Il n'ajoute pas les documents ou les pages nouvellement chargés à l'historique du navigateur. |
Il enregistre les documents ou les pages nouvellement chargés dans l'historique du navigateur. |
Il enregistrera également les documents ou les pages nouvellement chargés dans l'historique du navigateur. |
| Retour |
Il permet à l'utilisateur de revenir à la page/document précédent. |
Il permet également aux utilisateurs de revenir à la page précédente. |
Il ne permet pas à l'utilisateur de revenir à la page précédente. |
La principale différence entre la propriété window.location.href, les méthodes window.location.replace() et window.location.assign() réside dans la manière dont elles gèrent l'historique du navigateur. Si nous parlons de la méthode location.replace, elle remplace l'URL actuelle et ne permet pas à l'utilisateur de revenir à la page précédente. La méthode location.assign chargera un nouveau document et l'ajoutera à l'historique du navigateur, tout en permettant à l'utilisateur de revenir à une page précédemment ouverte. Enfin, la méthode window.location est identique à location.assign dans le sens où elle ajoute également le nouveau document à l'historique du navigateur.
Conclusion
Pour conclure cet article, forcer une nouvelle page à charger une autre page en JavaScript est une tâche simple et peut être effectuée en utilisant plusieurs méthodes JavaScript, à savoir la propriété window.location.href, la méthode window.location.replace() ou window .location. méthode assign(). Toutes ces méthodes aident les développeurs à créer des pages Web dynamiques et interactives, qui contribuent à créer de meilleures interactions utilisateur et à améliorer l'expérience des applications utilisateur.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
