HTML5 History API 사용하기 좋은 튜토리얼 (Pushstate?)
저는 HTML5 History API를 사용하여 AJAX가 로드된 콘텐츠의 딥링크 문제를 해결하는 것을 검토하고 있지만, 시작하기가 어렵습니다.좋은 자료를 아는 사람 있습니까?
링크가 전송될 경우 JS가 켜지지 않을 수 있기 때문에 이를 사용하고 싶습니다.JS가 있는 사람이 없는 사람에게 링크를 보낼 때 많은 해결책이 실패합니다.
저의 초기 연구는 JS 내의 History API와 pushState 방법을 지적하는 것 같습니다.
이 기능에 대한 Mozilla Developer Network 페이지만 있으면 훌륭한 튜토리얼을 받으실 수 있습니다. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
불행히도 HTML5 History API는 모든 HTML5 브라우저에서 다르게 구현되며(불일치하고 버그가 있음) HTML4 브라우저에 대한 폴백이 없습니다.다행히 History.js는 HTML5 브라우저에 대한 교차 호환성을 제공하며(모든 HTML5 브라우저가 예상대로 작동하도록 보장), 선택적으로 HTML4 브라우저에 대한 해시 폴백(데이터, 제목, pushState 및 replaceState 기능에 대한 유지 지원 포함)을 제공합니다.
History.js에 대한 자세한 내용은 https://github.com/browserstate/history.js 에서 확인할 수 있습니다.
Hashbangs VS Hashes VS HTML5 History API에 대한 기사는 다음을 참조하십시오. https://github.com/browserstate/history.js/wiki/Intelligent-State-Handling
저는 'HTML 5 속으로 파고들다'의 혜택을 많이 받았습니다.설명과 데모가 더 쉽고 핵심을 찌릅니다.히스토리 챕터 - http://diveintohtml5.info/history.html 및 히스토리 데모 - http://diveintohtml5.info/examples/history/fer.html
사용자가 딥 링크를 복사하거나 북마크하여 다시 방문하는 경우 HTML5 pushstate를 사용하는 동안 유의하십시오. 그러면 404의 직접적인 서버 히트가 되므로 준비가 되어 있어야 하며 pushstate js 라이브러리도 도움이 되지 않습니다.가장 쉬운 해결책은 다음과 같이 Nginx 또는 Apache 서버에 다시 쓰기 규칙을 추가하는 것입니다.
Apache(v호스트에서 Apache를 사용하는 경우):
<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새 페이지를 이벤트 또는 로드합니다.그것은 단지 국가를 역사 속으로 밀어 넣으려는 것이었습니다.단일 페이지 응용프로그램에 대한 "실행 취소" 기능입니다.으로 A를다를 .popstate이벤트 또는 용도history.go()새로운 상태로 이동할 수 있습니다.이 아이디어는 공유기가 그들의 음악을 들을 수 있게 하는 것입니다.popstate이벤트와 내비게이션을 사용할 수 있습니다.
주의할 사항:
history.pushState()그리고.history.replaceState()않음popstate사건.history.back(),history.forward(), .popstate사건.history.go()그리고.history.go(0)popstate사건.history.go(-1)및 면 지)history.go(1)로지) dispatchpopstate사건.
이와 같이 히스토리 API를 사용하여 새 상태를 푸시하고 팝스테이트 이벤트를 디스패치할 수 있습니다.
history.pushState({message:'New State!'}, 'New Title', '/link'); window.dispatchEvent(new PopStateEvent('popstate', { bubbles: false, cancelable: false, state: history.state }));
를 .popstate라우터를 사용한 이벤트입니다.
Davis.js를 시도해 볼 수 있는데, 사용 가능할 때 pushState를 사용하여 자바스크립트로 라우팅을 할 수 있고, 자바스크립트가 없으면 서버측 코드가 요청을 처리할 수 있습니다.
여기 레일캐스트의 라이언 베이츠가 이 주제를 다룬 멋진 스크린캐스트가 있습니다.마지막으로 history.pushState 메서드를 사용할 수 없는 경우에는 단순히 ax 기능을 사용하지 않도록 설정합니다.
http://railscasts.com/episodes/246-ajax-history-state
StateRouter.js라는 매우 간단한 라우터 추상화를 History.js 위에 썼습니다.개발 초기 단계이지만, 제가 작성하는 한 장의 애플리케이션에서 라우팅 솔루션으로 사용하고 있습니다.당신처럼, 저도 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 플러그인을 보고 싶을 수도 있습니다.그들의 사이트에는 많은 예시들이 있습니다.http://www.asual.com/jquery/address/
jQuery가 가능하다면 jQuery BBQ를 사용할 수 있습니다.
언급URL : https://stackoverflow.com/questions/4015613/good-tutorial-for-using-html5-history-api-pushstate
'source' 카테고리의 다른 글
| WooCommerce 플러그인에서 결제 전 주문 상품 상세 정보 가져오기 (0) | 2023.10.16 |
|---|---|
| 두 개의 enum에는 몇 가지 공통 요소가 있는데, 왜 오류가 발생합니까? (0) | 2023.10.16 |
| ASP에서 장시간 실행 중인 서버 호출의 진행률 표시줄.순 MVC (0) | 2023.10.16 |
| git repo에서 pip을 설치할 때 # egg=foo를 사용하는 이유 (0) | 2023.10.16 |
| PowerShell 및 StringBuilder (0) | 2023.10.16 |