Comment modifier dynamiquement les paramètres d'URL à l'aide de JavaScript ?

Manipulation dynamique des paramètres d'URL avec JavaScript

JavaScript offre des moyens polyvalents de modifier et de spécifier les paramètres d'URL, offrant ainsi aux développeurs un contrôle dynamique sur les pages Web. Explorons une technique pour obtenir cette fonctionnalité.

Modification des paramètres existants

Considérez l'URL "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc. " Pour modifier la valeur du paramètre 'rows' à, disons, 10, nous pouvons utiliser le code JavaScript suivant :

var newURL = updateURLParameter(window.location.href, 'rows', 10);

La fonction updateURLParameter prend trois paramètres : l'URL d'origine, le nom du paramètre ("rows") , et la nouvelle valeur (10). Il construit une nouvelle URL avec le paramètre mis à jour et la renvoie.

Ajout de paramètres

Si le paramètre 'rows' n'existe pas, nous pouvons l'ajouter au fin de l'URL en utilisant la même fonction :

var newURL = updateURLParameter(window.location.href, 'rows', 10) || window.location.href + '&rows=10';

Le code tente d'abord de mettre à jour le paramètre 'rows' existant (s'il existe). S'il n'existe pas, il ajoute « &rows=10 » à l'URL.

Considérations supplémentaires

Pour conserver l'état dans l'historique du navigateur, vous pouvez utiliser la fonction replaceState :

window.history.replaceState('', '', updateURLParameter(window.location.href, "param", "value"));

Ce qui précède met à jour l'URL dans la barre d'adresse du navigateur tout en préservant le historique.

Gestion avancée

Pour prendre en charge les URL avec des ancres (par exemple, "#mytarget"), une version étendue du code gère les ancres séparément :

function updateURLParameter(url, param, paramVal) {
  // Handle anchors
  var newAdditionalURL = "";
  var tempArray = url.split("?");
  var baseURL = tempArray[0];
  var additionalURL = tempArray[1];
  var temp = "";
  if (additionalURL) {
    var tmpAnchor = additionalURL.split("#");
    var TheParams = tmpAnchor[0];
    var TheAnchor = tmpAnchor[1];
    if (TheAnchor) additionalURL = TheParams;
    tempArray = additionalURL.split("&");
    for (var i = 0; i < tempArray.length; i++) {
      if (tempArray[i].split("=")[0] != param) {
        newAdditionalURL += temp + tempArray[i];
        temp = "&amp;";
      }
    }
  }

  // Update/add parameter
  if (TheAnchor) paramVal += "#" + TheAnchor;
  var rows_txt = temp + "" + param + "=" + paramVal;
  return baseURL + "?" + newAdditionalURL + rows_txt;
}

Cela garantit que les ancres sont correctement maintenues lors de la modification des paramètres d'URL.

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!