Morioh
Login
Louis Jones

Louis Jones

11 months ago

5 façons d'actualiser une page en JavaScript

Ce didacticiel vous montrera 5 façons d'actualiser une page en JavaScript et de comprendre les avantages et les inconvénients de chaque approche.

JavaScript est un langage de programmation polyvalent qui permet aux développeurs de créer des applications Web dynamiques et interactives. Une tâche courante dans le développement Web consiste à actualiser ou recharger une page Web, soit pour mettre à jour son contenu, soit pour déclencher certaines actions.

Dans cet article, nous allons explorer différentes façons d'actualiser une page en JavaScript et comprendre les avantages et les inconvénients de chaque approche.

Pourquoi actualiser une page en JavaScript ?

L'actualisation d'une page Web peut être utile dans divers scénarios. Par exemple:

  1. Mise à jour du contenu : si le contenu d'une page Web est dynamique et change fréquemment, vous devrez peut-être actualiser la page pour afficher les dernières données ou informations. Cela se voit couramment sur les sites Web d'actualités, les trackers boursiers, les applications météo, etc.
  2. Soumission de formulaire : après avoir soumis un formulaire sur une page Web, vous pouvez actualiser la page pour afficher un message de réussite ou réinitialiser le formulaire pour une nouvelle soumission.
  3. Réinitialisation de l'état : dans certains cas, vous souhaiterez peut-être réinitialiser l'état d'une page Web ou effacer certaines données pour repartir à zéro. L'actualisation de la page peut aider à atteindre cet objectif.

Explorons maintenant différentes manières d'actualiser une page en JavaScript.

Méthode 1 : Comment actualiser la page à l'aidelocation.reload()

Le moyen le plus simple d'actualiser une page en JavaScript est d'utiliser la location.reload()méthode . Cette méthode recharge la page Web actuelle à partir du serveur, en supprimant le contenu actuel et en chargeant le contenu le plus récent.

// Refresh the page
location.reload();

Avantages de l'utilisation de location.reload()

  • C'est simple et facile à utiliser.
  • Il recharge la page entière à partir du serveur, garantissant que vous obtenez le contenu le plus récent.

Inconvénients de l'utilisation de location.reload()

  • Il supprime le contenu actuel de la page, ce qui peut entraîner la perte d'entrées ou de données de l'utilisateur.
  • Cela peut provoquer un effet de scintillement lors du rechargement de la page, ce qui peut avoir un impact sur l'expérience utilisateur.

Méthode 2 : Comment actualiser la page à l'aidelocation.replace()

Une autre façon de rafraîchir une page en JavaScript consiste à utiliser la location.replace()méthode. Cette méthode remplace l'URL actuelle de la page Web par une nouvelle URL, rechargeant ainsi la page avec le nouveau contenu.

Lorsque vous essayez ceci dans votre console, vous remarquerez qu'il affiche votre URL actuelle :

console.log(location.href)

Cela signifie que lorsque vous utilisez la location.replace()méthode pour remplacer l'URL actuelle de la page Web par une nouvelle URL (même URL), votre page sera actualisée.

// Refresh the page by replacing the URL with itself
location.replace(location.href);

Avantages de l'utilisation de location.replace()

  • C'est un moyen rapide de recharger la page avec du nouveau contenu.
  • Il préserve le contenu actuel de la page et remplace uniquement l'URL, évitant ainsi la perte d'entrées ou de données de l'utilisateur.

Inconvénients de l'utilisation de location.replace()

  • Il remplace l'intégralité de l'URL de la page, ce qui peut entraîner la perte de l'historique de navigation actuel.
  • Cela peut ne pas fonctionner dans certains scénarios, par exemple lorsque la page Web a été ouverte dans une nouvelle fenêtre ou un nouvel onglet.

Méthode 3 : Comment actualiser la page à l'aidelocation.reload(true)

La location.reload()méthode accepte également un paramètre booléen forceGetqui, lorsqu'il est défini sur true, force la page Web à se recharger à partir du serveur, en contournant le cache.

Cela peut être utile lorsque vous voulez vous assurer que vous obtenez le contenu le plus récent du serveur, même si la page est mise en cache.

// Refresh the page and bypass the cache
location.reload(true);

Avantages de l'utilisation de location.reload (true)

  • Il garantit que vous obtenez le dernier contenu du serveur, même si la page est mise en cache.

Inconvénients de l'utilisation de location.reload (true)

  • Il supprime le contenu actuel de la page, ce qui peut entraîner la perte d'entrées ou de données de l'utilisateur.
  • Cela peut provoquer un effet de scintillement lors du rechargement de la page, ce qui peut avoir un impact sur l'expérience utilisateur.

Méthode 4 : Comment actualiser la page à l'aidelocation.href

Une autre façon d'actualiser une page en JavaScript consiste à utiliser la location.hrefpropriété pour définir l'URL de la page Web sur elle-même. Cela recharge effectivement la page avec la nouvelle URL, déclenchant une actualisation de la page.

// Refresh the page by setting the URL to itself
location.href = location.href;

Avantages de l'utilisation de location.href

  • C'est un moyen simple et efficace de rafraîchir la page.
  • Il préserve le contenu actuel de la page et ne met à jour que l'URL, évitant ainsi la perte d'entrées ou de données de l'utilisateur.

Inconvénients de l'utilisation de location.href

  • Il remplace l'intégralité de l'URL de la page, ce qui peut entraîner la perte de l'historique de navigation actuel.
  • Cela peut ne pas fonctionner dans certains scénarios, par exemple lorsque la page Web a été ouverte dans une nouvelle fenêtre ou un nouvel onglet.

Méthode 5 : Comment actualiser la page location.reload()avec un délai

Si vous souhaitez ajouter un délai avant de rafraîchir la page, vous pouvez utiliser la setTimeout()fonction en combinaison avec la location.reload()méthode.

Cela vous permet de spécifier un intervalle de temps en millisecondes avant que la page ne soit rechargée, vous donnant le contrôle sur le moment de l'actualisation.

// Refresh the page after a delay of 3 seconds
setTimeout(function(){
    location.reload();
}, 3000); // 3000 milliseconds = 3 seconds

Avantages de l'utilisation de location.reload() avec un délai

  • Il vous permet de contrôler le moment de l'actualisation de la page en ajoutant un délai.
  • Il offre une flexibilité dans les scénarios où vous souhaitez actualiser la page après un certain événement ou une certaine action.

Inconvénients de l'utilisation de location.reload() avec un délai

  • Cela peut entraîner un retard dans l'actualisation de la page, ce qui peut avoir un impact sur l'expérience utilisateur.
  • Cela peut ne pas fonctionner comme prévu dans les scénarios avec des connexions réseau instables ou lentes.

Emballer

Dans cet article, vous avez appris les différentes façons de rafraîchir une page en JavaScript. Chaque méthode a ses avantages et ses inconvénients, ce qui devrait vous permettre de choisir plus facilement la meilleure méthode pour votre projet de développement Web.

Lorsque vous utilisez l'une de ces méthodes pour actualiser une page, il est important de prendre en compte l'impact sur l'expérience utilisateur, la perte de données et l'historique de navigation.

J'espère que cet article vous aidera à comprendre comment recharger une page Web en JavaScript et à choisir la méthode appropriée pour votre cas d'utilisation spécifique.

Bon codage !

Source : https://www.freecodecamp.org

#javascript

1.60 GEEK