HTML5 History API (Pushstate?) 사용을위한 유용한 자습서

HTML5 History API (Pushstate?) 사용을위한 유용한 자습서

---

HTML5 히스토리 API를 사용하여 AJAX로드 컨텐츠와의 딥 링크 문제를 해결하려고 노력하고 있지만 시작하기 위해 고심하고 있습니다. 좋은 자원을 아는 사람이 있습니까?

링크가 전송되지 않았을 가능성을 허용하는 좋은 방법 인 것처럼 JS를 사용하지 않을 수 있으므로 이것을 사용하고 싶습니다. JS를 가진 사람이없는 사람에게 링크를 보내면 많은 솔루션이 실패합니다.

내 초기 연구는 JS 내의 History API와 pushState 메소드를 가리키는 것으로 보입니다.

http://html5demos.com/history

---

훌륭한 자습서를 위해이 기능에 대한 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 기능을 비활성화합니다.

http://railscasts.com/episodes/246-ajax-history-state

---

이 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를 사용할 수 있습니다

참고 URL : https://stackoverflow.com/questions/4015613/good-tutorial-for-using-html5-history-api-pushstate