콘텐츠로드 ajax로 HTML5 기록 API를 시험하고 있습니다.Ajax with history.pushState 및 popstate - popstate state 속성이 null 일 때 나는 무엇을해야합니까?
나는 상대 링크로 연결된 테스트 페이지를 가지고있다. 나는이 링크를 클릭하는 JS를 가지고있다. 링크가 클릭되면 핸들러는 href 속성을 잡고 요청 된 페이지의 컨텐츠를 현재 페이지의 컨텐츠 영역으로로드하는 ajaxLoadPage()에 전달합니다. (PHP 페이지는 정상적으로 요청할 경우 전체 HTML 페이지를 반환하지만 요청의 URL에? fragment = true가 추가되면 콘텐츠 청크 만 반환됩니다.)
내 클릭 핸들러가 history를 호출합니다. .pushState()를 사용하여 주소 표시 줄에 URL을 표시하고 브라우저 기록에 추가하십시오.
$(document).ready(function(){
var content = $('#content');
var ajaxLoadPage = function (url) {
console.log('Loading ' + url + ' fragment');
content.load(url + '?fragment=true');
}
// Handle click event of all links with href not starting with http, https or #
$('a').not('[href^=http], [href^=https], [href^=#]').on('click', function(e){
e.preventDefault();
var href = $(this).attr('href');
ajaxLoadPage(href);
history.pushState({page:href}, null, href);
});
// This mostly works - only problem is when popstate happens and state is null
// e.g. when we try to go back to the initial page we loaded normally
$(window).bind('popstate', function(event){
console.log('Popstate');
var state = event.originalEvent.state;
console.log(state);
if (state !== null) {
if (state.page !== undefined) {
ajaxLoadPage(state.page);
}
}
});
});
당신은 당신은 또한 뒤로 또는 앞으로 버튼 클릭을 처리 할 수있는 popstate 이벤트에 대한 이벤트 핸들러를 포함 할 필요가 pushState와 역사에 URL을 추가합니다. (이 작업을 수행하지 않으면 뒤로를 클릭하면 내 주소록에 기록에 푸시 된 URL이 표시되지만 페이지는 업데이트되지 않습니다.) 그래서 내 popstate 처리기는 내가 만든 각 항목의 state 속성에 저장된 URL을 가져옵니다. 적절한 내용을로드하기 위해 ajaxLoadPage에 전달합니다.
내 클릭 핸들러가 기록에 추가 된 페이지에는 정상입니다. 하지만 브라우저에서 "정상적으로"요청했을 때 브라우저에서 기록에 추가 한 페이지는 어떻게됩니까? 정상적으로 첫 페이지에 착륙 한 다음 Ajax 로딩을 수행하는 클릭으로 내 사이트를 탐색한다고 가정 해 봅니다. 그런 다음 첫 페이지에 대한 기록을 검토하려고하면 마지막 클릭이 첫 번째 페이지의 URL을 표시하지만 doesn 브라우저에 페이지를로드하지 마십시오. 왜 그런가요?
나는 이것이 마지막 popstate 이벤트의 state 속성과 관련이 있다는 것을 알 수 있습니다. state에 대한 속성은 pushState() 또는 replaceState()에 의해 히스토리에 추가 된 항목 일 뿐이므로 그 이벤트에 대해서는 null입니다. 그러나 페이지를 처음로드하는 것은 "정상적인"요청이었습니다. 브라우저가 원래 단계로 돌아가서 정상적인 URL을로드하지 않는 이유는 무엇입니까?
하나의 작은 문제로 화격자가 작동합니다. 페이지를 다시로드하면 페이지의 아약스 부분 만로드됩니다. 누구나 페이지를 다시로드 할 수있는 솔루션이 있는지 알고 싶습니다. – Hydrino
@Hydrino 올바른 URL로 상태를 누르고 AJAX로 파트 페이지를로드하십시오. –