h5--pushState, replacementState의 기록 기능에 대한 심층적인 이해-H5 튜토리얼-php.cn

h5--pushState, replacementState의 기록 기능에 대한 심층적인 이해

零下一度

풀어 주다： 2017-05-18 10:48:47

원래의

2944명이 탐색했습니다.

DOM의 window 개체는 window.history 메서드를 통해 브라우저 기록 읽기를 제공합니다. user 접속 기록을 앞뒤로 이동합니다.

HTML5부터 이 기록 스택을 조작할 수 있습니다.

1.역사

back(), forward(), 및 go() 메소드는 사용자 기록에서 앞뒤로 이동할 수 있습니다

앞으로 및 뒤로

뒤로:

window.history.back();

로그인 후 복사

이 방법은 사용자가 브라우저 도구 모음에서 뒤로 키를 클릭한 것처럼 작동합니다.

마찬가지로 다음 방법을 사용하여 사용자 전달 동작을 생성할 수도 있습니다.

window.history.forward();

로그인 후 복사

기록의 특정 위치로 이동

go() 메소드를 사용하여 세션 기록에서 특정 페이지를 로드할 수 있습니다.

한 페이지 뒤로 이동:

window.history.go(-1);

로그인 후 복사

한 페이지 앞으로 이동: 아아아아

마찬가지로 여러 페이지를 앞으로 또는 뒤로 이동할 수 있습니다.

브라우저 기록의 length 속성을 확인하여 기록 스택의 총 페이지 수를 확인할 수도 있습니다.

window.history.go(1);

로그인 후 복사

참고:IE는 go( )를 지원합니다. 메소드는 URL 매개변수를 전달합니다.

에서 기록 항목 추가 및 수정 Gecko2소개 시작(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

HTML5 history.pushState() 및 history.replaceState() 두 가지 메서드가 도입되어 history 항목을 추가하고 수정할 수 있습니다. 동시에 이러한 방법은 window.onpostate 이벤트와 함께 작동합니다.

使用history.pushState()方法来修改referrer,这种方法可以被用在经过修改状态后而为xmlhttpRequest对象创建的http header中。这个referrer会是创建XMLHttpRequest 时document的URL。

pushState 用于向 history 添加当前页面的记录，而 replaceState 和 pushState 的用法完全一样，唯一的区别就是它用于修改当前页面在 history 中的记录。

例子

假设http://mozilla.org/foo.html页面执行了一下JS

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

로그인 후 복사

这种方法将会使url地址栏显示http://mozilla.org/bar.html，但浏览器不会加载bar.html页面，即使这个页面存在也不会加载。

现在再次假设用户继续访问http://google.com，然后点击后退。这时，url地址栏将会，http://mozilla.org/bar.html，页面会得到popstate事件（chrome），这个状态对象会包含一个stateObj的copy。这个页面看起来像foo.html。+

이때 다시 클릭하면 URL은 http://mozilla.org/foo.html이 되고, 문서가 됩니다. 또 다른 popstate 이벤트와 null인 state 객체를 가져옵니다. 이 반환 작업은 문서의 내용을 변경하지 않습니다. (잠깐 후에 ...chrome을 로드해 보세요)

pushState 메소드

pushState()에는 세 개의 매개변수가 있습니다 :state 개체, 제목 (은 이제 무시되고 처리되지 않습니다) , URL(선택 ) . 구체적인 내용:

· state객체 – 상태 객체는 JavaScript 객체이며, 이는 pushState에 의해 생성된 객체와 관련됩니다. () 메소드 새로운 기록 엔터티입니다. 기록 레코드에 삽입하려는 항목에 대한 정보를 저장하는 데 사용됩니다. 상태 개체는 모든 Json 문자열일 수 있습니다. firefox는 상태 개체에 액세스하기 위해 사용자의 하드 디스크를 사용하므로 이 개체의 최대 저장 공간은 640k입니다. 이 숫자 값보다 크면 pushState() 메서드에서 예외가 발생합니다. 저장 공간이 더 필요하다면 로컬 저장소를 사용하세요.

· title—Firefox는 현재 이 매개변수를 무시하지만 나중에 사용될 수도 있습니다. 지금 사용하는 가장 안전한 방법은 향후 수정을 방지하기 위해 빈 문자열을 전달하는 것입니다. 또는 상태

를 나타내는 짧은 제목을 전달할 수도 있습니다.

· URL - 이 매개변수는 새 기록 엔터티의 URL을 전달하는 데 사용됩니다. 브라우저에서는 pushState() 메서드를 호출한 후에 이 URL이 로드되지 않습니다. 하지만 잠시 후에 이 URL을 로드해 보세요. 예를 들어, 사용자가 브라우저를 다시 시작한 후 새 url은 절대 경로가 아닐 수 있습니다. 상대 경로인 경우 기존 url을 기준으로 합니다. 새 url은 기존 url과 동일한 도메인에 있어야 합니다. 그렇지 않으면 pushState()에서 예외가 발생합니다. 이 매개변수는 선택사항입니다. 비어 있으면 문서의 현재 URL로 설정됩니다.

어떤 의미에서 pushState() 메서드를 호출하는 것은 window.location = “#foo”를 설정하는 것과 매우 유사합니다. 두 가지 모두 다른 연관을 생성하고 활성화합니다. 현재 문서의 history 엔터티이지만 pushState()에도 몇 가지 장점이 있습니다.

l 새 url은 임의의 최신 url<🎜일 수 있습니다. > 동일한 도메인의 url 반면, hash만 설정하면 window.location은 동일하게 문서.

l 필요하지 않으면 url을 수정하지 않아도 됩니다. 반대로 window.location = "#foo";를 설정하면 현재 hash가 #foo 가 아닌 경우에만 새 history 엔터티가 생성됩니다.

l 모든 데이터를 새로운 기록 엔터티와 연결할 수 있습니다. 해시 기반 접근 방식을 사용하면 모든 관련 데이터를 짧은 문자열로 인코딩해야 합니다.

pushState() 메소드는 해시변경<🎜을 만들지 않습니다. > 시간 이전 url이 해시만 다르더라도 발생합니다.

replaceState() 메서드

history.replaceState() 는 pushState()와 매우 유사하게 작동하지만 replaceState()가 대신 현재 history 엔터티를 수정하는 데 사용된다는 점이 다릅니다. 새로운 것을 만드세요. 이 방법은 특정 사용자 작업에 대한 응답으로 state 개체 또는 현재 history 엔터티를 업데이트해야 할 때 유용합니다. state 개체 또는 현재 history 엔터티의 url입니다.

popstate 이벤트

history 엔터티가 변경되면 popstate 이벤트가 진행됩니다. history 엔터티가 pushState 및 replaceState 메소드에 의해 생성된 경우 popstate 이벤트의 state 속성 history 엔터티<의 state 개체의 A 복사본을 포함합니다. 🎜>

자세한 내용은

창을 참조하세요. 온팝스테이트

读取当前的state

当页面加载时，它可能会有一个非空的state对象。这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载，页面将收到onload事件，但不会有popstate事件。然而，如果你读取history.state属性，将在popstate事件发生后得到这个state对象