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라우터 로 이벤트를 수신하십시오 .
new PopStateEvent(...)IE11에서 나에게만 작동합니까 , 아니면 작동하지 않는 것 같습니다. 누구나 아는 해결 방법이 있습니까?
var pop_state_event = document.createEvent('Event'); pop_state_event.initEvent('popstate', true, true); window.dispatchEvent(pop_state_event);
다음은 Railscast의 Ryan Bates가 주제에 대한 멋진 스크린 캐스트입니다. history.pushState 메소드를 사용할 수없는 경우 그는 단순히 ajax 기능을 비활성화합니다.
이 jQuery 플러그인을 살펴볼 수 있습니다. 그들은 그들의 사이트에 많은 예제를 가지고 있습니다. http://www.asual.com/jquery/address/
StateRouter.js 라는 History.js 위에 매우 간단한 라우터 추상화를 작성했습니다 . 개발 초기 단계에 있지만 작성중인 단일 페이지 응용 프로그램에서 라우팅 솔루션으로 사용하고 있습니다. 당신과 마찬가지로, 나는 JavaScript를 처음 접할 때 History.js를 이해하기가 매우 어렵다는 것을 알게되었습니다. 문제.
이 간단한 예제 코드는 사용 방법을 보여 주어야합니다.
var router = new staterouter.Router();
// Configure routes
router
.route('/', getHome)
.route('/persons', getPersons)
.route('/persons/:id', getPerson);
// Perform routing of the current state
router.perform();사용법을 설명하기 위해 내가 만든 작은 바이올린 이 있습니다.
jQuery를 사용할 수 있으면 jQuery BBQ를 사용할 수 있습니다