JavaScript를 사용하여 URL 주소를 수정하는 방법 소개

[소개] 현재 브라우저에는 페이지를 새로 고치지 않고도 브라우저 URL을 수정할 수 있으며, 브라우저에서 뒤로를 클릭하면 검색 기록을 저장할 수 있습니다. 검색 기록을 살펴보고 되감기 정보를 얻으세요.

최신 브라우저에는 페이지를 새로 고치지 않고도 브라우저 URL을 수정할 수 있는 기능이 있습니다. 검색 기록 브라우저에서 뒤로 버튼을 클릭하면 검색 기록에서 뒤로 정보를 얻을 수 있습니다. 이는 복잡해 보이지 않으며 몇 가지 코드를 작성해 보겠습니다. 그것이 어떻게 작동하는지 봅시다.

var stateObject = {};
var title = "Wow Title";
var newUrl = "/my/awesome/url";
history.pushState(stateObject,title,newUrl);

History 객체 pushState() 이 메소드에는 위의 예에서 볼 수 있듯이 3개의 매개변수가 있습니다. 첫 번째 매개변수는 현재 URL에 대한 기록 정보를 저장하는 Json 객체입니다. 두 번째 매개변수인 title은 문서 제목을 전달하는 데 사용되며, 세 번째 매개변수는 새 URL을 전달하는 데 사용됩니다. 브라우저의 주소 표시줄은 변경되지만 현재 페이지는 새로 고쳐지지 않습니다.

각 개별 URL에 임의의 데이터를 저장하는 예를 살펴보겠습니다.

for(i=0;i<5;i++){
  var stateObject = {id: i};
  var title = "Wow Title "+i;
  var newUrl = "/my/awesome/url/"+i;
  history.pushState(stateObject,title,newUrl);
}

이제 실행하고 브라우저의 뒤로 버튼을 클릭하여 URL이 어떻게 변경되는지 확인하세요. URL이 변경될 때마다 기록 상태 "id"와 해당 값을 저장합니다. 하지만 우리는 어떻게 역사적 상태를 되찾고 그것에 기초하여 무언가를 할 수 있을까요? 히스토리 객체의 상태가 변경될 때마다 트리거되는 "popstate"에 이벤트 리스너를 추가해야 합니다.

for(i=0;i<5;i++){
  var stateObject = {id: i};
  var title = "Wow Title "+i;
  var newUrl = "/my/awesome/url/"+i;
  history.pushState(stateObject,title,newUrl);
  alert(i);
}
 
window.addEventListener(&#39;popstate&#39;, function(event) {
  readState(event.state);
});
 
function readState(data){
  alert(data.id);
}

이제 뒤로 버튼을 클릭할 때마다 "popstate" 이벤트가 실행되는 것을 볼 수 있습니다. 그런 다음 이벤트 리스너는 기록 상태 개체와 연결된 URL을 검색하고 "id" 값을 묻는 메시지를 표시합니다.

아주 간단하고 재미있죠?

위 내용은 JavaScript를 사용하여 URL 주소를 수정하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!