Gecko2 이후 도입된 버전(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
HTML5는 histtory.pushState()와 history.replaceState() 두 가지 메서드를 도입하여 히스토리 엔터티를 추가하고 수정할 수 있게 합니다. 동시에 이 방법들은 window.onpostate 이벤트와도 작동합니다.
state가 수정된 후 xmlhttpRequest 객체에 생성되는 http 헤더에서 사용할 수 있는 history.pushState() 메서드를 사용하여 참조를 수정하세요. 이 참조자는 XMLHttpRequest가 생성될 때 문서의 URL이 됩니다.
pushState는 현재 페이지의 기록을 히스토리에 추가하는 데 사용되며, replaceState와 pushState는 정확히 동일하게 사용되며, 유일한 차이점은 현재 페이지의 히스토리 기록을 수정하는 데 사용된다는 점입니다.
본보기
http://mozilla.org/foo.html 페이지가 JS를 실행한다고 가정해
var stateObj = { foo: "bar" }; history.pushState(stateObj, "페이지 2", "bar.html");
이 방법은 URL 주소 표시줄을 http://mozilla.org/bar.html 표시합니다.하지만 브라우저는 bar.html 페이지가 있어도 불러오지 않습니다。
다시 한 번 사용자가 계속 http://google.com 에 접속하고 다시 클릭한다고 가정하자. 이 시점에서 URL 주소 표시줄은 http://mozilla.org/bar.html page에 popstate 이벤트(chrome)가 발생하며, 이 이벤트에는 stateObj 사본이 포함됩니다. 이 페이지는 foo.html 같아 보입니다. +
이 지점에서 다시 클릭하면 URL이 돌아 http://mozilla.org/foo.html,document 또 다른 popstate 이벤트와 null state 객체가 나타납니다. 이 반환 동작은 문서의 내용을 변경하지 않습니다. (아마 시간이 지나면 로드를 시도할 수도 있겠지만...) 크롬)
pushState 메서드
pushState()는 세 가지 매개변수를 가집니다: state object, title(이제 무시, 처리되지 않음), URL(선택사항). 구체적인 내용:
· state object – state 객체는 pushState() 메서드로 생성된 새로운 히스토리 엔티티와 관련된 Javascrip{filter}t 객체입니다. 히스토리에 삽입하고 싶은 항목 정보를 저장하는 데 사용됩니다. State 객체는 어떤 Json 문자열이든 될 수 있습니다. 파이어폭스는 사용자의 하드 드라이브를 사용해 상태 객체에 접근하기 때문에, 이 객체의 최대 저장 공간은 640k입니다. 이 값보다 크면 pushState() 메서드가 예외를 던집니다. 더 많은 저장 공간이 필요하다면 로컬 스토리지를 사용하세요.
· 제목—파이어폭스는 현재 이 매개변수를 무시하지만, 앞으로 사용될 수도 있습니다. 지금 가장 안전한 방법은 빈 문자열을 전달해 미래의 수정을 막는 것입니다. 또는 주를 나타내기 위해 짧은 타이틀을 사용할 수도 있습니다
· URL - 이 매개변수는 새로운 역사 엔티티의 URL을 전달하는 데 사용되며, pushState() 메서드를 호출한 후 브라우저가 이 URL을 불러오지 않는다는 점에 유의하세요. 하지만 시간이 지나면 이 URL을 불러올 수도 있겠네요. 예를 들어, 사용자가 브라우저를 재시작한 후 새 URL은 절대 경로가 아닐 수 있습니다. 상대 경로라면 기존 URL에 상대적인 경로가 됩니다. 새 URL은 기존 URL과 공동 도메인이어야 하며, 그렇지 않으면 pushState()가 예외를 던집니다. 이 매개변수는 선택 사항이며, 비어 있으면 문서의 현재 URL로 배치됩니다.
어떤 의미에서 pushState() 메서드를 호출하는 것은 window.locatio{filter}n = "#foo" 설정 방식과 비슷하며, 두 경우 모두 현재 문서와 연관된 또 다른 히스토리 엔터티를 생성하고 활성화하지만, pushState()는 추가적인 장점이 있습니다:
새 URL은 현재 URL과 동일한 도메인에 속하는 모든 URL일 수 있으며, 해시만 설정되어 있다면 window.locatio{filter}n이 같은 문서에 남아 있는 것과 다릅니다.
필요 없으면 URL을 수정하지 않고 그대로 두셔도 됩니다. 비교를 위해 window.locatio{filter}n = "#foo"를 설정하세요; 현재 해시가 #foo하지 않으면 새로운 히스토리 엔터티만 생성됩니다
임의의 데이터를 새 이력 엔티티와 연결할 수 있습니다. 해시 기반 접근법에서는 모든 관련 데이터를 짧은 문자열로 인코딩해야 합니다.
pushState() 메서드는 기존 URL과 새 URL이 단지 다른 해시일 뿐이라 해시가 변경되는 시간을 발생시키지 않는다는 점에 유의하세요.
replaceState() 메서드
history.replaceState()는 pushState()와 매우 유사하게 사용되지만, replaceState()는 새로운 히스토리 엔티티를 생성하는 대신 현재 히스토리 엔티를 수정하는 데 사용됩니다. 이 방법은 특정 사용자 행동에 대응해 상태 객체나 현재 기록 엔티티를 업데이트해야 할 때 유용할 수 있으며, 상태 객체나 현재 기록 엔티티의 URL을 업데이트하는 데 사용할 수 있습니다.
팝스테이트 행사
히스토리 엔티티가 변경되면 팝스테이트 이벤트가 발생합니다. 만약 pushState와 replaceState 메서드에 의해 히스토리 엔티티가 생성된다면, popstate 이벤트의 state 속성에는 히스토리 엔터티의 상태 객체 복사본이 포함됩니다
자세한 내용은 window.onpopstate 문서를 참조하세요
현재 상태를 읽어보세요
현재 상태를 읽어보세요
페이지가 로드될 때, 비어 있지 않은 상태 객체를 가질 수 있습니다. 이는 페이지가 상태 객체를 설정(pushState 또는 replaceState 사용)하고 사용자가 브라우저를 재시작할 때 발생할 수 있습니다. 페이지가 재로딩될 때 페이지는 온로드 이벤트를 받지만, 팝스테이트 이벤트는 발생하지 않습니다. 하지만 history.state 속성을 읽으면, popstate 이벤트가 발생한 후에 이 상태 객체가 나옵니다
History.pushState() 문서: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
수신 URL의 매개변수는 현재 주소 표시줄의 URL을 변경하는 데 사용되는 문자열 타입입니다. 한 가지 주목할 점은 이 매개변수가 크로스 도메인과 같아야 한다는 것입니다. 즉, 프로토콜, 도메인 이름, 포트가 동일해야 합니다.
Uncaught DOMException: 'History'에서 'pushState'를 실행하지 않음: URL 'http://www.test.com/'를 가진 히스토리 상태 객체는 오리진 ' 문서에서 생성할 수 없습니다 https://www.itsvse.com'와 URL 'https://www.itsvse.com/'.
1<anonymous>:9에서
올바른 코드:
|
게시됨 2017. 9. 12. 오후 1:55:04
|
|
|
|
게시됨 2017. 10. 27. 오전 9:51:10