JavaScript를 사용하여 URL 매개변수를 동적으로 수정하는 방법은 무엇입니까?

JavaScript를 사용한 동적 URL 매개변수 조작

JavaScript는 URL 매개변수를 수정하고 지정하는 다양한 방법을 제공하므로 개발자가 웹페이지를 동적으로 제어할 수 있습니다. 이 기능을 구현하는 기술을 살펴보겠습니다.

기존 매개변수 변경

URL "site.fwx?position=1&archiveid=5000&columns=5&rows=20&sorting=ModifiedTimeAsc를 고려해 보세요. " 'rows' 매개변수 값을 10으로 변경하려면 다음 JavaScript 코드를 사용할 수 있습니다.

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

updateURLParameter 함수는 원래 URL, 매개변수 이름('rows')의 세 가지 매개변수를 사용합니다. , 새 값(10)입니다. 업데이트된 매개변수로 새 URL을 구성하고 이를 반환합니다.

매개변수 추가

'rows' 매개변수가 없으면 동일한 함수를 사용하여 URL 끝:

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

코드는 먼저 기존 'rows' 매개변수(존재하는 경우)를 업데이트하려고 시도합니다. 존재하지 않는 경우 URL에 '&rows=10'을 추가합니다.

추가 고려 사항

브라우저 기록에서 상태를 유지하려면 다음을 사용할 수 있습니다. replacementState 함수:

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

위의 내용은 기록을 유지하면서 브라우저 주소 표시줄의 URL을 업데이트합니다.

고급 처리

지원하려면 앵커가 있는 URL(예: "#mytarget")에서는 코드의 확장 버전이 앵커를 별도로 처리합니다.

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

이렇게 하면 URL 매개변수를 수정할 때 앵커가 올바르게 유지됩니다.

위 내용은 JavaScript를 사용하여 URL 매개변수를 동적으로 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!