내 사이트에서 실제로 history.js를 어떻게 사용합니까?

내 사이트에서 실제로 history.js를 어떻게 사용합니까?

저는 스택 오버플로에 대한 history.js의 모든 게시물을 읽고 소스 코드를 살펴보았지만 Javascript/jquery를 처음 접하는 사람으로서 HTML5 히스토리를 지원하고 i8/9와 같은 HTML4 브라우저를 지원하기 위해 실제로 구현하는 방법을 찾는 데 어려움을 겪고 있습니다.저는 최대한 일관된 URL을 제공함으로써 UX의 이점을 이해할 수 있기 때문에, 이것이 딥 링크를 해결하고 북마크를 구현할 수 있도록 하는 방법을 이해할 수 있지만, 제 사이트에서 실제로 이것을 사용하려고 하면 길을 잃습니다.

내 페이지에 history.js 스크립트를 추가한 후

수정할 코드는 다음과 같습니다.

    function(window,undefined){

    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
        History.log(State.data, State.title, State.url);
    });

    // Change our States
    History.pushState({state:1}, "State 1", "?state=1"); // logs {state:1}, "State 1", "?state=1"
    History.pushState({state:2}, "State 2", "?state=2"); // logs {state:2}, "State 2", "?state=2"
    History.replaceState({state:3}, "State 3", "?state=3"); // logs {state:3}, "State 3", "?state=3"
    History.pushState(null, null, "?state=4"); // logs {}, '', "?state=4"
    History.back(); // logs {state:3}, "State 3", "?state=3"
    History.back(); // logs {state:1}, "State 1", "?state=1"
    History.back(); // logs {}, "Home Page", "?"
    History.go(2); // logs {state:3}, "State 3", "?state=3"

})(window);

이것은//Change our states이 코드가 기록 제어의 예를 제공할 때 모든 새로운 코드는 어디로 갑니까?

아니면 이 전체 코드 블록 대신에 나만의 코드를 작성해야 할까요? (나는 코딩에 익숙하지 않기 때문에 이 시점에서 나를 돕기 위해 jquery를 사용합니다.)

동적 콘텐츠 로드에 대한 이 기사를 읽고 사이트에서 구현하려고 시도했지만(이 코드를 작동시킬 수는 있지만 i8/9에서 제대로 재생되지 않을 것이라는 것은 알고 있습니다), history.js와 결합하는 방법을 찾는 데 어려움을 겪고 있습니다.

아슬로, 두 번째로, 저는 history.js가 modernizr을 어떻게 처리하는지 알아보려고 합니다.

modernizr.history(테스트를 수행하고 .js를 지원하지 않는 경우 일반 페이지 로드로 되돌림)를 대체하는 것입니까? 아니면 다음과 같이 작동합니까?

if (Modernizr.history) {
   //Code goes here that works if it's HTML 5 Browser with .history support? I know some HTML5 browsers deal with .history oddly (read buggy) so what happens in those cases?
} else {
   //code from above goes here? with function(window, undefined){...etc...  ?
}

사용자 사이트에 기록 지원을 추가하는 것만으로는 이를 사용할 수 있는 기능이 실제로 존재하지 않는 한 어떤 방법으로도 도움이 되지 않습니다.

현대화가 진행되는 한, 현재 브라우저에서 역사가 지원되는지 여부와 조치를 취할 경우 x 그렇지 않은 조치 y만 알려줍니다.

자, 역사는 이렇게 작동합니다.

고려하다history.js일종의 매크로 레코더와 같습니다.클라이언트가 무언가를 클릭하면 구성된 URL 또는 실제 URL과 연결된 일부 변수를 푸시합니다.

클라이언트가 검색을 클릭하면 다음과 같이 호출됩니다.

function search(params) {
  // record your current UI position
  // data (to save), title (to set on page), url (to set on page)
  History.pushState({ params: params }, "Search", "?search");


   // now run whatever should happen because client triggered search()
}

이제 클라이언트가 뒤로 버튼을 클릭하면 이전에 저장된 상태로 작업을 수행할 수 있습니다.고객이 뒤로 버튼을 누르면 트리거됩니다.statechange또한 해당 이벤트에 가입되어 있으므로 이전에 저장한 상태를 확인하고 함수를 호출하여 그에 따라 UI를 변경할 수 있습니다.

// Bind to StateChange Event
History.Adapter.bind(window, 'statechange', function() {
  var State = History.getState();

  // returns { data: { params: params }, title: "Search": url: "?search" }
  console.log(State); 

  // or you could recall search() because that's where this state was saved
  if (State.url == "?search") {
    search(data.params);
  }
});

그것은 거의 요약됩니다.가 함수를 합니다. 사용자가 할당한 경우state/url그리고 클라이언트가 다시 클릭하면 이전 상태를 확인하고 UI를 복원할 것인지 다른 기능을 실행합니다.

이 모든 것이 순식간에 복잡하고 까다로운 코드가 될 수 있고, 저는 설명해야 할 다른 것이 무엇인지 알 수 없습니다. 그래서 당신이 AHA를 가지고 있고, 이제 무엇을 해야 할지 아는 것이 아니라면, 저는 이것에 대해 그냥 잊어버릴 것입니다.

여기서 자동으로 진행되는 것은 전혀 없습니다.saving/restoring상태가 변경될 경우 발생하는 상황을 고려하기 위해 응용 프로그램의 다른 모든 항목을 수동으로 코딩해야 합니다.

또한 딥 링크는 이러한 것들과 아무런 관련이 없습니다.프로그램 자체를 초기화하고 URL을 통해 직접 호출하는 것을 기반으로 특정 UI 요소를 고유하게 표시할 수 있는 기능이 있어야 합니다.사용자가 애플리케이션을 이미 사용하고 있을 때 기록은 상태 관리만을 위한 것이므로, 사용자가 애플리케이션을 실행할 때 발생하는 작업을 제어할 수 있습니다.back/forward단추를 채우다

그리고 JS를 통해 발생하는 모든 일은 검색 엔진이 js를 신경 쓰지 않고 당신 페이지의 원시 텍스트만 색인화하기 때문에 당신에게 아무런 혜택을 주지 않을 것입니다.따라서 검색 엔진과 호환되는 딥 링크를 원한다면 요청된 URL에 따라 UI를 특정 상태로 렌더링하는 서버 사이드 코드가 필요합니다.

언급URL : https://stackoverflow.com/questions/15745296/how-do-i-actually-use-history-js-on-my-site