동적으로 내용을 바꾸고 현재 URL을 바꿉니다.

Question

그래서 나는 어떤 것을 클릭해도 div의 내용이 '무엇이든'으로 바뀌는 링크리스트를 얻고 있습니다. 간단합니다.

내가 문제가있는 부분은 변경된 콘텐츠에 대한 일종의 영구 링크를 얻는 것입니다.

say main domain is www.example.com 
then you click link X and content Y shows up on the page 
then the URL should change to www.example.com/SOMETHINGHERE 
--all good so far-- 
then using the new link should take you to the site with the changed content 

는의 몇 가지 예제 코드를하자 :

<a href="something.html" class="linx" >Click me</a> 
<a href="something2.html" class="linx" > Click me too</a> 
<div id="loadhere"></div> 

$('.linx').click(function (event) { 
    event.preventDefault(); 
    $('#loadhere').load(this.href); 
}); 

아주 기본적인 것들입니다. 그것이 작동하는 방식입니다. 이제 좀 봤어, 그리고 역사 API를 사용하거나 심지어 history.js 라이브러리를 사용해야 할 것 같습니다. 나는 조금 땜장이났다. 그러나 나는 새다. 그리고 전체의 역사 물건은 조금 혼란 스럽다.

달성하고자하는 목표에 가까운 예제는 Soulwire's personal website. 입니다. 실험 섹션으로 이동하여 각 섹션 실행 방법을 확인하십시오.

기본적으로 내가 묻는 것은 역사 API를 사용하도록 도울 수 있는지 여부입니다 (실제로 이것이 방법 일 경우 - 제가 틀릴 수도 있습니다) 아마도 문서를 연결하는 것 이상의 예를 들어 주면됩니다. , 또는 다른 방법이 있다면 이것을 달성하려고 노력할 수 있습니다.

미리 감사드립니다.

Answer 1

기능을 사용하면 주소 표시 줄의 내용을 변경할 수 있습니다.

history.pushState(stateObj, 'page title', 'pathname'); 

을 그래서 코드로 구현 :

$('.linx').click(function (event) { 
    event.preventDefault(); 
    $('#loadhere').load(this.href); 
    // use push state here   
    var stateObj = {'foo': 'bar'}; 
    history.pushState(stateObj, this.href.replace('.html', ''), this.href); 
}); 

pushState()는 사용자가 브라우저 탐색 버튼을 사용하여 탐색 할 수 있도록 사이트가 역사에 있었던 상태를 밀어의 작용을 말한다 stateObject은 사이트 상태를 정의하는 데이터를 저장할 수 있습니다. 체크 된 체크 박스 또는 스크롤 상태.

history.state으로이 개체에 액세스 할 수 있습니다. 위의 예를 들어, 그래서 :

history.state.foo = "bar" 

참고이 최신 웹 표준 및 단계는 이전 버전의 브라우저와의 호환성을 보장하기 위해 수행해야 할 것입니다.

history.pushState()here에 대해 자세히 알아보십시오.