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.
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.
window.location.href = "new_url";
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);
L'exemple ci-dessus redirigera l'utilisateur vers l'URL donnée (https://www.tutorialspoint.com) après 3 secondes.
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>
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.
window.location.replace("new_url");
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.
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>
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.
window.location.assign("new_url");
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.
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>
| 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.
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!
Quel fichier est au format moyen ?
Qu'est-ce qu'un plug-in de navigateur
La différence entre Fahrenheit et Celsius
Utilisation de la méthode jQuery hover()
Que se passe-t-il avec le voyant rouge sur le signal lumineux ?
Comment résoudre une erreur dans le script de la page actuelle
A quoi sert le commutateur KVM ?
Comment allumer et éteindre Douyin Xiaohuoren
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
