[javascript] 페이지를 새로 고치지 않고 URL 매개 변수 제거

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

답변

window.history.replaceState(null, null, window.location.pathname);

// get the string following the ?
var query = window.location.search.substring(1)

// is there anything there ?
if(query.length) {
   // are the new history methods available ?
   if(window.history != undefined && window.history.pushState != undefined) {
        // if pushstate exists, add a new state to the history, this changes the url without reloading the page

        window.history.pushState({}, document.title, window.location.pathname);
   }
}

var newURL = location.href.split("?")[0];
window.history.pushState('object', document.title, newURL);

<script>
// Remove URL Tag Parameter from Address Bar
if (window.parent.location.href.match(/tag=/)){
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: document.title, Url: window.parent.location.pathname };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        window.parent.location = window.parent.location.pathname;
    }
}
</script>

let params = new URLSearchParams(location.search)
params.delete('success')
history.replaceState(null, '', '?' + params + location.hash)

function take_param(key) {
    var params = new Map(location.search.slice(1).split('&')
        .map(function(p) { return p.split(/=(.*)/) }))
    var value = params.get(key)
    params.delete(key)
    var search = Array.from(params.entries()).map(
        function(v){ return v[0]+'='+v[1] }).join('&')
    return {search: search ? '?' + search : '', value: value}
}

history.replaceState(
    null, '', take_param('success').search + location.hash)

window.history.pushState(null, null, window.location.pathname);