약간 이상 pushState - 클릭

Question

에 URL "상태"를 변경 그래서 내가 쓴 그 함수의 onclick를 호출하는 pushState 호출을 처리하는 기능과 일부 jQuery를 다음과 같은 스크립트를

function pushUrlState(id, url) { 
    if (typeof (history.pushState) != "undefined") { 
     var obj = { Id: id, Url: url }; 
     history.pushState(obj, obj.Id, obj.Url); 
    } else { 
     alert("This browser does not support HTML5."); 
    } 
} 
$(function() { 
    $("#id1").click(function() { 
     pushUrlState('Id1', '2017/15/05/my-birthday-is-today'); 
    }); 
    $("#id2").click(function() { 
     pushUrlState('Id2', '2017/14/05/my-birthday-is-tomorrow'); 
    }); 
    $("#id3").click(function() { 
     pushUrlState('Id3', '2017/16/05/my-birthday-was-yesterday'); 
    }); 
}); 

작품 아주 멋지게, 하지만 난 다음에 결국 다양한 요소의 많은 클릭 한 후 :

http://127.0.0.1:3000/2017/15/05/2017/14/05/2017/16/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/2017/14/05/my-birthday-is-tomorrow

내가 그 다시 도메인에 URL을 죽이고 호출 할 수있는 기능이 있습니까?

Answer 1

상대 URL을 전달합니다 (귀하의 URL은 /으로 시작하지 않음).

https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method

URL은 - 새로운 기록 항목의 URL이 매개 변수에 의해 주어진다. 브라우저는 pushState()를 호출 한 후이 URL을로드하려고 시도하지 않지만 나중에 브라우저를 다시 시작한 후에 과 같이 URL을로드하려고 시도 할 수 있습니다. 새 URL은 일 필요는 없습니다. 상대 URL 인 경우 현재 URL을 기준으로 해결됩니다. 새 URL은 현재 URL과 동일한 출신이어야합니다. 그렇지 않으면 pushState()가 예외를 throw합니다. 이 매개 변수는 선택적입니다. 을 지정하지 않으면 문서의 현재 URL로 설정됩니다.

콘솔에서 다음이 개 코드 조각을 시도하고 차이 참조 :이 코드처럼 동작

(상대 URL)

[1,2,3,4,5,6,7,8,9] 
.forEach(
    num => 
    //relative url (does not start with/
    history.pushState({}, `page ${num}`, `hello${num}/world${num}.html`) 
) 

이것은 당신이 행동을하고 싶습니다처럼 동작 :

[1,2,3,4,5,6,7,8,9] 
.forEach(
    num => 
    //absolute url start with/
    history.pushState({}, `page ${num}`, `/hello${num}/world${num}.html`) 
)