2011-03-06 3 views
24

저는 AJAX를 통해 콘텐츠를 제공하는 사이트에서 일하고 있습니다.초기 페이지로드시 history.popstate가 트리거되지 않도록 할 수 있습니까?

메뉴에서 항목을 클릭하면 콘텐츠 부분이 $.get 개의 응답으로 업데이트되고 아무 것도 표시되지 않습니다.

history.pushState을 구현하면 브라우저의 뒤로/앞으로 버튼으로 탐색 할 수 있습니다. 페이지가 처음로드

$(function() { 
    $(window).bind("popstate", function() { 
     $.getScript(location.href); 
    }); 
}); 

문제는이 기능이 너무 페이지가 즉시 다시로드 $.getScript 수행합니다

나는 역사 탐색에 대한 내용을로드하려면 다음을해야합니다. 페이지가 처음로드되면 초기 HTML보기가 렌더링되고 두 번째로드에서는 JS 요청 이후 JS보기가 렌더링됩니다.

HTML 요청이있는 페이지에서이 이벤트가 발생하지 않게하려면 어떻게해야합니까?

+0

참고 : history.popstate 번이라고합니다 - 바로 첫 페이지로드 : 이것은 의도적으로 설계된 동작입니다. (Chrome에서 확인) –

답변

37

, 모든 HTML5 브라우저는 조금 다르게 API를 처리 . History.js은 HTML5 기록 API를위한 교차 브라우저 API를 제공하며, 해당 경로를 사용하려는 경우 HTML4 브라우저의 경우 선택적 hashchange 대체 URL을 제공합니다. https://github.com/browserstate/ajaxify

hashbang, 해시와 HTML5의 역사 API에 대한 설명으로가는 긴 기사 Intelligent State Handling의 일부입니다 :이 코드를 사용할 수있는 RIA/아약스 - 응용 프로그램으로 웹 사이트를 업그레이드

.

추가 도움이 필요하면 알려주세요. :) 건배.

+1

History.js를 언급 해 주셔서 감사합니다. 나는 프레임 워크에 pushState를 구현하려고했는데 아마 내 머리카락을 찢어 버렸을 것이다. – andrew

+4

자신 만의 플러그인에 대한 부끄러운 소식 ... tsk tsk ... History.js를 농담으로 삼아 많은 프로젝트에서 내 삶과 여러 시간의 작업을 저장했습니다! – Martin

+1

심지어 hasherjs 잘 일을합니다. 현재 생산 시스템에서 완벽하게 잘 작동합니다. –

4

브라우저가 처음로드 될 때 항상 popstate 이벤트가 발생합니다. 그래서이 popstate가 당신 것이거나 아닌지를 결정해야합니다.

pushState를 수행 할 때 상태 개체가 있는지 확인하십시오. 그렇게하면 나중에 확인할 수 있습니다.

는 그 다음 popstate 처리기에, 당신은 더 이상 도움 :)이 popstate 이벤트 페이지로드 해고

8

필요하면 알려주세요

$(function() { 
    $(window).bind("popstate", function(data) { 
     if (data.state.isMine) 
      $.getScript(location.href); 
    }); 
}); 

// then add the state object 
history.pushState({isMine:true},title,url); 

상태 객체를 :) 확인은하지 않습니다 이벤트 객체에 state 속성이 있습니다. 이렇게하면 페이지가로드 될 때 이벤트가 시작되는지 여부를 확인할 수 있습니다. 그냥 한 번 코딩하고 해결 방법을 구현하지 않고 일을 기대할 수 있도록 몇 가지 문제로 실행하는거야 기본 HTML5 역사의 API를 사용하여

window.onpopstate = function (event) { 
    if (event.state) { 
    // do your thing 
    } else { 
    // triggered by a page load 
    } 
} 
+0

올바른 : 그리고 당신은 사용할 수 있습니다 : 'else (without event.state)'없이 –

23

당신은 내가 현재의 HTML 본문을 포함, 바 ADRESS을 변경하고 현재 상태를 저장하려면이 옵션을 사용하는 event.originalEvent

// Somewhere in your previous code 
if (history && history.pushState) { 
    history.pushState({module:"leave"}, document.title, this.href); 
} 


$(window).bind("popstate", function(evt) { 
    var state = evt.originalEvent.state; 
    if (state && state.module === "leave") { 
    $.getScript(location.href); 
    } 
}); 
+0

이것은 놀랍게도 작동합니다! 감사합니다 :) – James

+0

'history.pushState'의 존재에 대한 테스트가'history'의 존재를 암시하지 않습니까? 누구든지 왜'history.pushState'에 대한 테스트가 충분하지 않다고 말할 수 있습니까 (유스 케이스)? –

+0

@OliverSchafeld 이걸보고 있습니다. 'history'의 속성을 참조하려고하지만'history'가 객체가 아니라면 에러를 발생시킵니다. 따라서 속성을 사용하거나 확인하기 전에'history'가 있는지 확인해야합니다 (확실하지 않은 경우 객체입니다). –

0

을 얻을 필요가, 그리고 난 다른 Ajax 호출하지 않고 다시 부통 클릭에 다시 넣으십시오.모든 브라우저에 저장됩니다

  1. $(document).ajaxComplete(function(ev, jqXHR, settings) { 
    
        var stateObj = { url: settings.url, innerhtml: document.body.innerHTML }; 
        window.history.pushState(stateObj, settings.url, settings.url); 
    }); 
    
    
    window.onpopstate = function (event) { 
        var currentState = history.state; 
        document.body.innerHTML = currentState.innerhtml; 
    }; 
    
관련 문제