pushState 및 replacementState 사용 단계에 대한 자세한 설명

이번에는 pushState 및 replacementState 사용 단계에 대해 자세히 설명하겠습니다. 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. replacementState() 메소드

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

6.팝스테이트 이벤트

每当处于激活状态的历史记录条目发生变化时,popstate 事件就会在对应window对象上触发。 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。

我们也可以直接在history对象上获取state，如下：

var currentState = history.state;

需要注意的是，调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 opstate事件只会在浏览器某些行为下触发， 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)。

七、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}

八、pushState()的用途

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

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

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

H5+WebWorkers多线程开发使用详解

CSS3二级导航菜单制作步骤详解

위 내용은 pushState 및 replacementState 사용 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!