Bagaimana untuk mengubah suai parameter URL secara dinamik menggunakan JavaScript?

Manipulasi Parameter URL Dinamik dengan JavaScript

JavaScript menyediakan cara serba boleh untuk mengubah suai dan menentukan parameter URL, memperkasakan pembangun dengan kawalan dinamik ke atas halaman web. Mari terokai teknik untuk mencapai fungsi ini.

Menukar Parameter Sedia Ada

Pertimbangkan URL "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=Modified " Untuk menukar nilai parameter 'rows' kepada, katakan, 10, kita boleh menggunakan kod JavaScript berikut:

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

Fungsi updateURLParameter mengambil tiga parameter: URL asal, nama parameter ('rows') , dan nilai baharu (10). Ia membina URL baharu dengan parameter yang dikemas kini dan mengembalikannya.

Menambah Parameter

Jika parameter 'baris' tidak wujud, kami boleh menambahkannya pada hujung URL menggunakan fungsi yang sama:

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

Kod mula-mula cuba mengemas kini parameter 'baris' sedia ada (jika wujud). Jika ia tidak wujud, ia menambahkan '&rows=10' pada URL.

Pertimbangan Tambahan

Untuk mengekalkan keadaan dalam sejarah penyemak imbas, anda boleh menggunakan fungsi replaceState:

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

Di atas mengemas kini URL dalam bar alamat penyemak imbas sambil mengekalkan sejarah.

Pengendalian Lanjutan

Untuk menyokong URL dengan sauh (cth., "#mytarget"), versi lanjutan kod mengendalikan sauh secara berasingan:

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;
}

Ini memastikan sauh diselenggara dengan betul semasa mengubah suai parameter URL.

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai parameter URL secara dinamik menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!