페이지를 갱신하지 않고 URI를 변경하려면 어떻게 해야 합니까?

페이지를 갱신하지 않고 URI를 변경하려면 어떻게 해야 합니까?

저는 CodeIginer로 웹사이트를 구축했고, 제 페이지 중 하나에 AJAX와 JQuery를 구현하고 싶습니다.문제는 콘텐츠를 로드해도 URL이 변경되지 않는다는 것입니다.

예를 들어 다음과 같은 URI가 있다고 합시다.

• http://www.example.com/controller/function/param
• http://www.example.com/controller/function/param2

버튼을 클릭했을 때 첫 번째에서 두 번째로 어떻게 바꿀 수 있나요?

HTML5 에서는, 다음의 URL 를 변경할 수 있습니다.

window.history.pushState("object or string", "Title", "/new-url");

http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/ 를 체크해 주세요.

문서: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().c2.a0method

---

갱신하다

새로운 HTML5 이력 API를 지원하는 브라우저의 개요:

http://caniuse.com/#search=pushState (caniuse.com is worth to bookmark!)

이미 어려운 작업을 수행하고 일반적인 해시태그 솔루션으로 우아하게 폴백하는 프레임워크가 있습니다.

History.js

History.js는 모든 브라우저에서 HTML5 이력/상태 API(pushState, replaceState, onPopState)를 정상적으로 지원합니다.데이터, 타이틀, replaceState에 대한 지속적인 지원 포함.jQuery, MoTools 및 프로토타입을 지원합니다.HTML5 브라우저에서는 해시를 사용하지 않고 URL을 직접 수정할 수 있습니다.HTML4 브라우저의 경우 오래된 onhashchange 기능을 다시 사용합니다.

Backbone.js

백본은 키 값 바인딩 및 커스텀 이벤트, 열거형 함수의 풍부한 API 컬렉션, 선언형 이벤트 처리를 갖춘 뷰, RESTful JSON 인터페이스를 통해 기존 애플리케이션에 모두 연결함으로써 JavaScript 부하가 높은 애플리케이션에 구조를 제공합니다. ...pushState 지원은 순전히 옵션 기반 i로 존재합니다.n 백본pushState를 지원하지 않는 오래된 브라우저에서는 해시 기반 URL fragment가 계속 사용되며, pushState 지원 브라우저가 해시 URL을 방문하면 실제 URL로 투과적으로 업그레이드됩니다.

Mootools(플러그인 경유)

MuTools는 중간에서 고급 JavaScript 개발자용으로 설계된 컴팩트 모듈러형 객체 지향 JavaScript 프레임워크입니다.[...] popstate 또는 해시 변경을 통한 이력 관리새로고침 없이 페이지의 URL을 대체하고 이전 브라우저의 해시 변경으로 폴백합니다.

도조 툴킷

Dojo는 웹 표준을 플랫폼으로 사용하여 시간을 절약하고 개발 프로세스에 따라 확장할 수 있습니다.이 툴킷은 경험이 풍부한 개발자가 고품질의 데스크톱 및 모바일 웹 애플리케이션을 구축하기 위해 사용하는 툴킷입니다.[... dojox.app]는 HTML5 pushState 표준을 통해 내비게이션 이력을 관리하고 브라우저 지원 이력 관리에 위임합니다.

몇 가지 예를 들면요

---

(!!) 주의해 주세요

사용 시 중요한 부작용 중 하나는pushState(백본 매뉴얼 참조):

실제 URL을 사용하려면 웹 서버가 해당 페이지를 올바르게 렌더링할 수 있어야 하므로 백엔드 변경도 필요합니다.예를 들어 /documents/100 의 루트가 있는 경우 브라우저가 해당 URL을 직접 방문하면 웹 서버가 해당 페이지를 제공할 수 있어야 합니다.완전한 검색 엔진 크롤링을 위해서는 서버에서 페이지의 완전한 HTML을 생성하는 것이 가장 좋지만 웹 어플리케이션일 경우 루트 URL과 동일한 콘텐츠를 렌더링하고 나머지는 Backbone Views와 JavaScript로 채우는 것이 좋습니다.

해시(#)를 사용하여 나중에 원하는 것을 넣을 수 있습니다.

이것을 사용하여 구축한 사이트를 다음에 JavaScript에서 해시를 읽고 적절한 함수를 호출합니다.

http://bannerhouse.com.au/ #/filength=media&id=돈

사이드 노트:

이는 플래시 웹 사이트나 플래시 콘텐츠에도 유용합니다.FlashVars를 사용하여 해시 값을 SWF로 해석하고 그에 따라 적절한 섹션/화면을 로드할 수 있습니다.

Javascript를 통해 를 사용하여 에서 Javascript를 합니다.location.hash = "param2"그러면 http://example.com/mypage/#이 http://example.com/mypage/#http2로 변경됩니다.

물론 해시 뒤에 "http"를 넣을 수도 있습니다.따라서 기본 URL http://example.com/을 사용하여 다음을 추가합니다.location.hash = "/MyPage/MySubPage/MyInfo";http://example.com/#/MyPage/MySubPage/MyInfo로 변경됩니다.

해시 태그를 사용하지 않는 한 유사한 스레드는 no를 추론했습니다.

한 가지 아이디어는 204 HTTP 응답을 사용하는 것이었지만 매우 권장되지 않았습니다.

W3부터:

No Response 204

서버가 요청을 수신했지만 회신할 정보가 없으므로 클라이언트는 동일한 문서 보기에 있어야 합니다.이는 주로 문서를 동시에 변경하지 않고 스크립트를 입력할 수 있도록 하기 위한 것입니다.

다음은 WHATWG의 HTML Living Standard(구 HTML5) © 7.10.2 참조 컨텍스트 세션 이력에서 발췌한 것입니다.

세션 이력의 여러 연속된 엔트리가 동일한 문서를 공유할 수 있습니다.이 문제는 일반 탐색을 통해 초기 엔트리에 도달하고 다음 엔트리가 다음을 통해 추가될 때 발생할 수 있습니다.history.pushState()fragment로의 네비게이션을 통해 발생할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/6118693/how-can-i-change-the-uri-without-refreshing-the-page