> 웹 프론트엔드 > JS 튜토리얼 > 페이지를 다시 로드하지 않고 URL을 수정하려면 어떻게 해야 합니까?

페이지를 다시 로드하지 않고 URL을 수정하려면 어떻게 해야 합니까?

Linda Hamilton
풀어 주다: 2024-12-15 09:26:10
원래의
830명이 탐색했습니다.

How Can I Modify a URL Without Reloading the Page?

페이지를 다시 로드하지 않고 URL 수정: 최종 가이드

웹 개발 세계에서 페이지를 다시 로드하지 않고 주소 표시줄을 업데이트하는 기능은 오랫동안 사용되어 왔습니다. 인기 있는 기능입니다. 한때 꿈이었던 이 개념은 HTML5 History API의 도입 덕분에 대부분의 최신 브라우저에서 현실이 되었습니다.

획기적인 변화: HTML5 History API

HTML5 History API는 개발자는 브라우저의 기록 개체를 조작하여 전체 페이지를 다시 로드하지 않고도 URL을 변경할 수 있습니다. 이 기능은 세 가지 주요 메서드를 통해 구현됩니다.

  • pushState(): 브라우저 기록에 새 항목을 생성하고 페이지를 다시 로드하지 않고 URL을 업데이트합니다.
  • replaceState(): 브라우저 기록에서 현재 항목의 URL을 수정하여 새 항목으로 바꿉니다. one.
  • popstate(): 브라우저 기록에서 현재 항목을 삭제하고 기록 스택에서 이전 URL로 이동합니다.

pushState 사용 방법 ()

pushState()의 기능을 활용하고 페이지를 새로 고치지 않고 주소 표시줄을 업데이트하려면 다음을 따르세요. 단계:

  1. 상태 개체 또는 문자열 정의: 이 개체 또는 문자열은 새 URL과 관련된 데이터를 나타냅니다.
  2. 제목 지정: 제목은 브라우저의 제목 표시줄에 표시되며 비어 있을 수 있습니다. 문자열.
  3. 새 URL 제공: 주소 표시줄에 표시할 URL입니다.

pushState() 구문은 다음과 같습니다.

window.history.pushState(stateObject, title, newURL);
로그인 후 복사

실제 예

사용 방법을 보여주는 예는 다음과 같습니다. pushState():

// Create a new history entry with the updated URL
window.history.pushState(null, null, "/new-url");
로그인 후 복사

이 코드는 페이지를 새로 고치지 않고 주소 표시줄을 "/new-url"로 업데이트합니다.

브라우저 지원

HTML5 History API는 모든 주요 최신 브라우저에서 지원됩니다. 포함:

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

이 새로운 지식을 사용하면 다음을 수행할 수 있습니다. 이제 페이지를 다시 로드할 필요 없이 웹페이지의 URL을 쉽게 수정할 수 있습니다. 이는 웹에서 더욱 역동적이고 원활한 사용자 경험을 창출할 수 있는 흥미로운 가능성을 열어줍니다.

위 내용은 페이지를 다시 로드하지 않고 URL을 수정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿