TL; DR
1하려면 수정 현재 URL 및 삽입 / 추가 그것 (새로운 수정 된 URL) 기록 목록, 사용에 새로운 URL 항목으로 pushState:
window.history.pushState({}, document.title, "/" + "my-new-url.html");
2- 현재 URL 을 히스토리 항목에 추가하지 않고 바꾸 려면 다음을 사용하십시오 .replaceState
window.history.replaceState({}, document.title, "/" + "my-new-url.html");
3 따라 귀하의 비즈니스 로직 , pushState다음과 같은 경우에 유용 할 것입니다 :
브라우저의 뒤로 버튼 을 지원하고 싶습니다
새 URL 을 작성 하고 , 새 URL 을 히스토리 항목에 추가 / 삽입 / 푸시하고 현재 URL로 설정하려는 경우
사용자가 동일한 매개 변수를 사용하여 페이지 를 책갈피로 지정 (같은 내용을 표시)
프로그래밍 방식 으로 데이터 를 액세스 하여 앵커에서 파싱stateObj
귀하의 의견에서 알 수 있듯이 다시 리디렉션하지 않고 URL을 정리하고 싶습니다.
전체 URL을 변경할 수는 없습니다. 도메인 이름 뒤에 오는 것을 변경할 수 있습니다. 즉, 변경할 수는 없지만 www.example.com/이후의 내용은 변경할 수 있습니다..com/
www.example.com/old-page-name => can become => www.example.com/myNewPaage20180322.php
배경
우리는 사용할 수 있습니다 :
1- 히스토리 항목에 새로운 수정 된 URL을 추가하려는 경우 pushState () 메소드 .
2- 현재 기록 항목 을 업데이트 / 대체하려는 경우 replaceState () 메소드 .
.replaceState()현재 기록 항목을 새로 작성하는 대신 수정하는.pushState() 것을 제외하고 는 정확히 작동합니다 . 이렇게해도 전역 브라우저 기록에 새 항목을 만들 수는 없습니다..replaceState()
.replaceState()일부 사용자 조치에 대한 응답으로 현재 히스토리 항목 의 상태 오브젝트 또는 URL 을 업데이트 하려는 경우 특히 유용 합니다.
암호
이를 위해 다음 예제와 유사하게 작동하는이 예제에 pushState () 메서드 를 사용 합니다.
var myNewURL = "my-new-URL.php";//the new URL
window.history.pushState("object or string", "Title", "/" + myNewURL );
대체 자유롭게 pushState과 replaceState요구 사항에 따라.
paramter "object or string"를 {}and "Title"로 document.title바꾸면 최종 문장이 다음 과 같이됩니다.
window.history.pushState({}, document.title, "/" + myNewURL );
결과
앞의 두 줄의 코드는 다음과 같은 URL을 만듭니다.
https://domain.tld/some/randome/url/which/will/be/deleted/
되기 위해 :
https://domain.tld/my-new-url.php
동작
이제 다른 접근법을 시도해 봅시다. 파일 이름을 유지해야한다고 가정하십시오. 파일 이름은 마지막 /과 쿼리 문자열 앞에옵니다 ?.
http://www.someDomain.com/really/long/address/keepThisLastOne.php?name=john
될거야:
http://www.someDomain.com/keepThisLastOne.php
이와 같은 것이 작동하게됩니다.
//fetch new URL
//refineURL() gives you the freedom to alter the URL string based on your needs.
var myNewURL = refineURL();
//here you pass the new URL extension you want to appear after the domains '/'. Note that the previous identifiers or "query string" will be replaced.
window.history.pushState("object or string", "Title", "/" + myNewURL );
//Helper function to extract the URL between the last '/' and before '?'
//If URL is www.example.com/one/two/file.php?user=55 this function will return 'file.php'
//pseudo code: edit to match your URL settings
function refineURL()
{
//get full URL
var currURL= window.location.href; //get current address
//Get the URL between what's after '/' and befor '?'
//1- get URL after'/'
var afterDomain= currURL.substring(currURL.lastIndexOf('/') + 1);
//2- get the part before '?'
var beforeQueryString= afterDomain.split("?")[0];
return beforeQueryString;
}
최신 정보:
한 라이너 팬의 경우, 콘솔 / 파이어 버그에서 이것을 시도하면이 페이지 URL이 변경됩니다 :
window.history.pushState("object or string", "Title", "/"+window.location.href.substring(window.location.href.lastIndexOf('/') + 1).split("?")[0]);
이 페이지 URL은 다음에서 변경됩니다.
http://stackoverflow.com/questions/22753052/remove-url-parameters-without-refreshing-page/22753103#22753103
에
http://stackoverflow.com/22753103#22753103
참고 : 로 사무엘 Liew는 아래의 의견에 표시된,이 기능 만 도입되었습니다 HTML5.
다른 방법은 실제로 페이지를 리디렉션하는 것입니다 (그러나 쿼리 문자열 '?'을 잃어 버릴 수 있습니다. 여전히 필요하거나 데이터가 처리 되었습니까?).
window.location.href = window.location.href.split("?")[0]; //"http://www.newurl.com";