집 > 기사 > 웹 프론트엔드 > H5의 pushState 및 replacementState 사용 분석

H5의 pushState 및 replacementState 사용 분석

不言원래의: 2018-06-14 11:02:571676검색

이 글은 주로 H5의 pushState와 replacementState 사용에 대한 관련 정보를 소개하고 있습니다. 내용이 꽤 좋아서 참고용으로 올려드리겠습니다.

1. 소개

HTML5에서는 기록 항목을 각각 추가하고 수정할 수 있는 History.pushState() 및 History.replaceState() 메서드를 도입했습니다. 이러한 메서드는 일반적으로 window.onpopstate와 함께 사용됩니다.

2. pushState() 메소드의 예

다음 JavaScript 코드가 http://mozilla.org/foo.html에서 실행된다고 가정합니다.

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

이렇게 하면 브라우저 주소 표시줄이 http로 표시됩니다. : //mozilla.org/bar.html이지만 브라우저가 bar.html을 로드하거나 bar.html이 존재하는지 확인하지도 않습니다.

이제 사용자가 http://google.com을 방문하고 뒤로 버튼을 클릭한다고 가정해 보겠습니다. 이때 주소 표시줄에는 http://mozilla.org/bar.html이 표시되고 페이지는 popstate 이벤트를 트리거합니다. 이벤트 객체 상태에는 stateObj의 복사본이 포함됩니다. 페이지 자체는 foo.html과 동일하지만 내용은 popstate 이벤트에서 수정될 수 있습니다.

뒤로 버튼을 다시 클릭하면 페이지 URL이 http://mozilla.org/foo.html로 변경되고 문서 객체 문서가 또 다른 popstate 이벤트를 트리거합니다. 이번에는 이벤트 객체 상태 객체가 null입니다. 여기서도 마찬가지입니다. 반환하면 문서의 내용이 변경되지 않습니다. 비록 문서가 popstate 이벤트를 수신할 때 내용이 변경될 수 있지만 해당 내용은 여전히 이전 프레젠테이션과 일치합니다.

3. pushState() 메서드

pushState()에는 상태 개체, 제목(현재 무시됨) 및 URL(선택 사항) 세 가지 매개 변수에 대한 세부 정보가 필요합니다.

State 객체 - 상태 객체 state는 pushState()를 통해 새로운 기록 항목을 생성하는 JavaScript 객체입니다. 사용자가 새 상태로 이동할 때마다 popstate 이벤트가 시작되고 이벤트의 상태 속성에는 기록 항목의 상태 객체 복사본이 포함됩니다.

Title — 이 매개변수는 현재 무시되지만 향후 사용될 수 있습니다. 빈 문자열을 전달하는 것은 여기서는 안전하지만 나중에는 안전하지 않습니다. 또는 점프 상태에 대한 짧은 제목을 전달할 수 있습니다.

URL — 이 매개변수는 새로운 기록 URL 레코드를 정의합니다. 브라우저는 pushState() 호출 직후에 이 URL을 로드하지 않지만 나중에 사용자가 브라우저를 다시 열 때와 같은 특정 상황에서는 이 URL을 로드할 수 있습니다. 새 URL은 절대 경로일 필요는 없습니다. 새 URL이 상대 경로인 경우 현재 URL을 기준으로 처리됩니다. 새 URL은 현재 URL과 동일한 출처를 가져야 합니다. 그렇지 않으면 pushState()에서 예외가 발생합니다. 이 매개변수는 선택사항이며 기본값은 현재 URL입니다.

4 pushState() 메서드와 해시 값 설정의 차이점

어떤 의미에서 pushState()를 호출하는 것은 window.location = "#foo"를 설정하는 것과 비슷합니다. 둘 다 현재 페이지를 클릭하고 새 기록을 활성화하세요. 그러나 pushState()에는 다음과 같은 장점이 있습니다.

새 URL은 현재 URL과 동일한 출처를 가진 모든 URL이 될 수 있습니다. 그리고 window.location을 설정하면 해시만 수정한 경우에만 동일한 파일이 유지됩니다.

필요한 경우 URL을 변경하지 않고 기록 레코드를 생성할 수 있습니다. window.location = "#foo";를 설정하면 현재 해시가 #foo가 아닌 경우에만 새 기록 항목이 생성됩니다.

모든 데이터를 새로운 기록 항목과 연결할 수 있습니다. 해시 값 기반 방법을 사용하면 모든 관련 데이터를 짧은 문자열로 인코딩해야 합니다.

5.replaceState() 메소드

history.replaceState()의 사용은 History.pushState()와 매우 유사합니다. 차이점은 replacementState()가 새 기록 항목을 생성하는 대신 현재 항목을 수정한다는 것입니다. .

6. Popstate 이벤트

활성 기록 항목이 변경될 때마다 해당 창 개체에서 popstate 이벤트가 트리거됩니다. 현재 활성 기록 항목이 History.pushState() 메서드에 의해 생성되었거나 History.replaceState() 메서드에 의해 수정된 경우 popstate 이벤트 객체의 상태 속성에는 기록 항목의 상태 객체 복사본이 포함됩니다.

다음과 같이 기록 개체에서 직접 상태를 가져올 수도 있습니다.

var currentState = history.state;

history.pushState() 또는 History.replaceState()를 호출해도 popstate 이벤트가 발생하지 않는다는 점에 유의해야 합니다. opstate 이벤트는 뒤로 및 앞으로 버튼 클릭(또는 JavaScript에서 History.back(), History.forward() 및 History.go() 메소드 호출)과 같은 브라우저의 특정 작업에서만 트리거됩니다.

7. popstate 이벤트 예시

현재 웹페이지 주소가 http://example.com/example.html이라면, 다음 코드를 실행한 후

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数. 
history.pushState({page: 1}, "title 1", "?page=1");    //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2");    //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2);  // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}

8. 목적 pushState()

王二使用 pushState() 主要是它可以监听到浏览器上的返回事件，这在移动端上也同样适用，参考如下一段代码(可以直接运行）：

<body>
    <p>window.onpopstate可以监听到返回键事件</p>
    <script>
        history.pushState({}, ""); 
        window.onpopstate = function(event) {
            //这里可以监听到浏览器的返回事件，并做你想做的事情，
            //例如：跳转到另一个网页
            location.href = "https://www.baidu.com";
        };
    </script>
</body>

当然，用 window.onhashchange 也可以监听到浏览器上的返回事件，参考如下一段代码(可以直接运行）：

<body>
    <p>window.onhashchange可以监听到返回键事件</p>
    <script>
        setTimeout(()=>{
            location.hash="a"
        },100);
        setTimeout(()=>{
            window.onhashchange = function(event) {
                location.href = "https://www.baidu.com";
            }
        },200);
    </script>
</body>

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

H5의 pushState 및 replacementState 사용 분석

관련 기사