HTML5 히스토리 API를 사용하여 AJAX로드 컨텐츠와의 딥 링크 문제를 해결하려고 노력하고 있지만 시작하기 위해 고심하고 있습니다. 좋은 자원을 아는 사람이 있습니까?
링크가 전송되지 않았을 가능성을 허용하는 좋은 방법 인 것처럼 JS를 사용하지 않을 수 있으므로 이것을 사용하고 싶습니다. JS를 가진 사람이없는 사람에게 링크를 보내면 많은 솔루션이 실패합니다.
내 초기 연구는 JS 내의 History API와 pushState 메소드를 가리키는 것으로 보입니다.
답변
훌륭한 자습서를 위해이 기능에 대한 Mozilla 개발자 네트워크 페이지 만 있으면됩니다. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
불행히도 HTML5 히스토리 API는 모든 HTML5 브라우저에서 다르게 구현되며 (일관되지 않고 버그가 있음) HTML4 브라우저에 대한 대체는 없습니다. 다행스럽게도 History.js 는 HTML5 브라우저에 대한 상호 호환성을 제공하고 (모든 HTML5 브라우저가 예상대로 작동하도록 보장) 선택적으로 HTML4 브라우저에 대한 해시 폴백 (데이터, 제목, pushState 및 replaceState 기능에 대한 지원 유지 포함)을 제공합니다.
History.js에 대한 자세한 내용은 https://github.com/browserstate/history.js를 참조 하십시오.
Hashbangs VS Hashes VS HTML5 히스토리 API에 대한 기사는 여기를 참조하십시오.
https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling
답변
‘Dive into HTML 5’에서 많은 이점을 얻었습니다. 설명과 데모는 더 쉽고 중요합니다. 역사 장-http: //diveintohtml5.info/history.html
및 역사 데모-http: //diveintohtml5.info/examples/history/fer.html
답변
사용자가 딥 링크를 복사하거나 책갈피에 추가하여 다시 방문하면 HTML5 푸시 상태를 사용하는 동안 명심하십시오. 그러면 직접 서버 히트가 발생하여 404가되어 준비가 필요하며 푸시 상태 js 라이브러리도 도움이되지 않습니다. 당신. 가장 쉬운 해결책은 다음과 같이 Nginx 또는 Apache 서버에 다시 쓰기 규칙을 추가하는 것입니다.
Apache (vhost에서 사용중인 경우) :
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
니 진스
rewrite ^(.+)$ /index.html last;
답변
HTML5 역사 사양은 황당하다.
history.pushState()popstate이벤트를 전달 하거나 자체적으로 새 페이지를로드 하지 않습니다 . 그것은 단지 상태를 역사로 밀어 넣는 것입니다. 이것은 단일 페이지 응용 프로그램에 대한 “실행 취소”기능입니다. popstate이벤트 를 수동으로 전달 하거나 history.go()새 상태로 이동하는 데 사용해야 합니다. 아이디어는 라우터가 popstate이벤트를 듣고 탐색 할 수 있다는 것입니다.
참고할 사항 :
history.pushState()및history.replaceState()전달하지 않는popstate이벤트를.history.back(),history.forward()브라우저의 뒤로 및 앞으로 버튼은popstate이벤트를 전달 합니다.history.go()및history.go(0)전체 페이지를 다시로드를하고 전달하지 않는popstate이벤트를.history.go(-1)(뒤로 1 페이지) 및history.go(1)(앞으로 1 페이지)는 디스패치popstate이벤트를 수행 합니다.
이와 같은 히스토리 API를 사용하여 새 상태를 푸시하고 popstate 이벤트를 전달할 수 있습니다.
history.pushState({message:'New State!'}, 'New Title', '/link');
window.dispatchEvent(new PopStateEvent('popstate', {
bubbles: false,
cancelable: false,
state: history.state
}));
그런 다음 popstate라우터 로 이벤트를 수신하십시오 .
답변
당신은 시도 할 수 Davis.js을 당신이 자바 스크립트를하지 않고는 서버 측 코드가 요청을 처리 할 수 있습니다 사용할 수와 pushState를 사용하여 자바 스크립트에서 라우팅을 제공합니다.
답변
다음은 Railscast의 Ryan Bates가 주제에 대한 멋진 스크린 캐스트입니다. history.pushState 메소드를 사용할 수없는 경우 그는 단순히 ajax 기능을 비활성화합니다.