창이 있는 브라우저 jquery ajax 이력을 교차합니다.history.pushState 및 폴백

창이 있는 브라우저 jquery ajax 이력을 교차합니다.history.pushState 및 폴백

이 게시물을 개선하시겠습니까?인용문 및 답변이 올바른 이유를 포함하여 이 질문에 대한 자세한 답변을 제공하십시오.충분한 세부 정보가 없는 답변은 편집 또는 삭제할 수 있습니다.

jQuery와 AJAX를 사용한 내비게이션 이력을 크로스 브라우저로 구현하고 싶습니다.제 접근법은window.history.pushState해시 URL로 폴백합니다./#!/url를 지원하지 않는 브라우저의 경우window.history.pushState.

예를 들어 다음과 같습니다.

<a href="/home">home</a>
<a href="/about">about</a>
<a href="/contact">contact</a>

를 지원하는 브라우저window.history.pushState이러한 링크 중 하나를 클릭하면 페이지를 갱신하지 않고 http://domain.com/home, http://domain.com/about 등으로 주소가 변경됩니다.브라우저가 지원하지 않는 경우window.history.pushStatefragment 식별자(http://domain.com/#!/home, http://domain.com/#!/about)를 사용해야 합니다.

---

업데이트: 여기 피드백에 따라 이전 브라우저 폴백에서 HTML5 이력 API용 jQuery Address를 사용하는 Ajax SEO(git)를 구현했습니다./#!/url.

// Assuming the path is retreived and stored in a variable 'path'

if (typeof(window.history.pushState) == 'function') {
    window.history.pushState(null, path, path);
} else {
    window.location.hash = '#!' + path;
}

폴백 해시 URL에서 사용하고 있는 것:

History = History || {};
History.pathname = null;
History.previousHash = null;
History.hashCheckInterval = -1;
History.stack = [];
History.initialize = function () {
    if (History.supportsHistoryPushState()) {
        History.pathname = document.location.pathname;
        $(window).bind("popstate", History.onHistoryChanged);
    } else {
        History.hashCheckInterval = setInterval(History.onCheckHash, 200);
    }
};
History.supportsHistoryPushState = function () {
    return ("pushState" in window.history) && window.history.pushState !== null;
};
History.onCheckHash = function () {
    if (document.location.hash !== History.previousHash) {
        History.navigateToPath(document.location.hash.slice(1));
        History.previousHash = document.location.hash;
    }
};
History.pushState = function (url) {
    if (History.supportsHistoryPushState()) {
        window.history.pushState("", "", url);
    } else {
        History.previousHash = url;
        document.location.hash = url;
    }
    History.stack.push(url);
};
History.onHistoryChanged = function (event) {
    if (History.supportsHistoryPushState()) {
        if(History.pathname != document.location.pathname){
            History.pathname = null;
            History.navigateToPath(document.location.pathname);
        }
    }
};
History.navigateToPath = function(pathname) {
    History.pushState(pathname);

    // DO SOME HANDLING OF YOUR PATH HERE

};

클릭 이벤트를 다음과 같이 바인딩할 수 있습니다.

$(function(){
    $("a").click(function(){
        var href = $(this).attr('href');
        History.navigateToPath( href )
        return false;
    });
});

이 예에 대한 설명이 더 필요하시면 기꺼이 들어드리겠습니다.

---

편집

제 다른 답을 보세요.

오랜만의 답변이므로 Backbone 사용을 권장합니다.

실장은 다음과 같습니다.

// First setup a router which will be the responder for URL changes:
var AppRouter = Backbone.Router.extend({

  routes: {
    "*path": "load_content"
  },

  load_content: function(path){
    $('#content').load('/' + path);
  }

});
var appRouter = new AppRouter;

// Then initialize Backbone's history
Backbone.history.start({pushState: true});

매뉴얼 발췌:

HTML5를 사용하려는 경우pushState응용 프로그램에서 지원, 사용Backbone.history.start({pushState: true})를 사용하고 싶은 경우pushState를 지원하지 않는 브라우저에서는 대신 전체 페이지 새로 고침을 사용할 수 있습니다.{hashChange: false}옵션을 선택합니다.

그리고 이제 매번Backbone.history.navigate라고 불립니다.AppRouter에의 패스의 AJAX 로드를 실행합니다.#contentdiv를 클릭합니다.

AJAX를 사용하는 모든 링크를 처리하려면 다음을 사용할 수 있습니다.

$("a").on('click', function(event){
    event.preventDefault();
    Backbone.history.navigate( event.currentTarget.pathname, {trigger: true} )
});

다음 점에 주의해 주세요.{trigger: true}이것에 의해, 라우터내의 핸들러가 호출됩니다(url 의 변경으로부터만 취득됩니다).

코드 예시를 만지작거립니다.http://jsfiddle.net/koenpunt/pkAz7/1/

언급URL : https://stackoverflow.com/questions/4250553/cross-browser-jquery-ajax-history-with-window-history-pushstate-and-fallback