[JQUERY] 어떻게 문서를 점프하지 않고하면 window.location.hash 업데이트 할 수 있습니다?

어떻게 문서를 점프하지 않고하면 window.location.hash 업데이트 할 수 있습니다?

해결법

1. ---

   1.오래된 것들에 대한 대체 현대적인 브라우저에서 역사의 API를 사용하여 해결 방법은 :

   오래된 것들에 대한 대체 현대적인 브라우저에서 역사의 API를 사용하여 해결 방법은 :

   if(history.pushState) {
       history.pushState(null, null, '#myhash');
   }
   else {
       location.hash = '#myhash';
   }
   

   신용 레아 베루로 이동

2. ---

   2.문제는 당신이 요소의 ID 속성으로하면 window.location.hash를 설정하는 것입니다. 브라우저에 관계없이 여부 "로 preventDefault ()"또는하지의 해당 요소로 이동하는 것이 예상되는 동작입니다.

   문제는 당신이 요소의 ID 속성으로하면 window.location.hash를 설정하는 것입니다. 브라우저에 관계없이 여부 "로 preventDefault ()"또는하지의 해당 요소로 이동하는 것이 예상되는 동작입니다.

   이 문제를 해결 얻을 수있는 한 가지 방법은 지금과 같은 임의의 값으로 해시을 접두사로 사용하는 것입니다 :

   window.location.hash = 'panel-' + id.replace('#', '');
   

   그런 다음, 당신이해야 할 모든 페이지로드의 앞에 둔 해시를 확인하는 것입니다. 당신이 해시 값을 관리 해주기 때문에 추가 보너스로, 당신도 그것을 스크롤을 원활하게 할 수 ...

   $(function(){
       var h = window.location.hash.replace('panel-', '');
       if (h) {
           $('#slider').scrollTo(h, 800);
       }
   });
   

   당신이 항상 작업이 필요 (뿐 아니라 초기 페이지로드에) 경우, 온 - 더 - 플라이 올바른 요소에 해시 값과 점프에 대한 변경 사항을 모니터링하는 기능을 사용할 수 있습니다 :

   var foundHash;
   setInterval(function() {
       var h = window.location.hash.replace('panel-', '');
       if (h && h !== foundHash) {
           $('#slider').scrollTo(h, 800);
           foundHash = h;
       }
   }, 100);
   

3. ---

   3.저렴하고 불쾌한 솔루션은 .. 추악한 #을 사용! 스타일.

   저렴하고 불쾌한 솔루션은 .. 추악한 #을 사용! 스타일.

   를 설정하려면 :

   window.location.hash = '#!' + id;
   

   그것을 읽으려면 :

   id = window.location.hash.replace(/^#!/, '');
   

   이 페이지에서 앵커 또는 ID와 일치하지 않기 때문에, 그것은 이동하지 않습니다.

4. ---

   4.왜, 현재 스크롤 위치를 얻을 다음 해시를 할당 변수에 넣고 그것이 위치로 페이지 스크롤 등을 넣어 말아 :

   왜, 현재 스크롤 위치를 얻을 다음 해시를 할당 변수에 넣고 그것이 위치로 페이지 스크롤 등을 넣어 말아 :

   var yScroll=document.body.scrollTop;
   window.location.hash = id;
   document.body.scrollTop=yScroll;
   

   이 작업을해야합니다

5. ---

   5.나는 아틸라 Fulop (레아 베루) 최신 브라우저 오래된 브라우저를 다음과 같이 대한 개빈 브록 솔루션을위한 솔루션의 조합을 사용 :

   나는 아틸라 Fulop (레아 베루) 최신 브라우저 오래된 브라우저를 다음과 같이 대한 개빈 브록 솔루션을위한 솔루션의 조합을 사용 :

   if (history.pushState) {
       // IE10, Firefox, Chrome, etc.
       window.history.pushState(null, null, '#' + id);
   } else {
       // IE9, IE8, etc
       window.location.hash = '#!' + id;
   }
   

   개빈 브록에 의해 관찰, 당신은 문자열을 처리해야합니다 다시 ID를 캡처 (이 경우이 없거나 할 수있는은 "!")은 다음과 같습니다 :

   id = window.location.hash.replace(/^#!?/, '');
   

   그 전에, 나는 user706270에 의해 제안 된 것과 유사한 솔루션을 시도하지만, 인터넷 익스플로러와 함께 잘 작동하지 않았다 자사의 자바 스크립트 엔진이 매우 빠르게 아니므로, 당신은 불쾌한 시각 효과를 스크롤 증가와 감소를 알 수 있습니다.

6. ---

   6.이 솔루션은 날 위해 일했습니다.

   이 솔루션은 날 위해 일했습니다.

   에 location.hash 설정의 문제는이 페이지에서 볼 않다면 페이지가 해당 ID로 이동할 것입니다.

   window.history.pushState의 문제는 사용자가 클릭하면 각 탭에 대한 역사에 항목을 추가하는 것입니다. 사용자가 뒤로 버튼을 클릭 그런 때, 그들은 이전 탭으로 이동합니다. (이 또는 당신이 원하는 것이 아닐 수도있다. 그것이 내가 원하지 않는 것이었다).

   나를 위해, replaceState 때문에 사용자가 뒤로 버튼을 클릭 할 때, 그들은 이전 페이지로 이동, 그것은 단지 현재의 역사를 대체한다는 점에서 더 나은 선택이었다.

   $('#tab-selector').tabs({
     activate: function(e, ui) {
       window.history.replaceState(null, null, ui.newPanel.selector);
     }
   });
   

   MDN에 역사의 API 문서를 확인하십시오.

7. ---

   7.나는 확실히 당신은 원래의 요소하지만 어떻게 데이터 ID와 같은 다른 것으로는 ID ATTR를 사용하여 전환에 대해을 변경할 수 있습니다 아니에요 경우? 그런 다음 당신의 해시 값에 대한 데이터-ID의 값을 읽고 점프하지 않습니다.

   나는 확실히 당신은 원래의 요소하지만 어떻게 데이터 ID와 같은 다른 것으로는 ID ATTR를 사용하여 전환에 대해을 변경할 수 있습니다 아니에요 경우? 그런 다음 당신의 해시 값에 대한 데이터-ID의 값을 읽고 점프하지 않습니다.

8. ---

   8.이 솔루션은 나를 위해 일

   이 솔루션은 나를 위해 일

   // store the currently selected tab in the hash value
       if(history.pushState) {
           window.history.pushState(null, null, '#' + id);
       }
       else {
           window.location.hash = id;
       }
   
   // on load of the page: switch to the currently selected tab
   var hash = window.location.hash;
   $('#myTab a[href="' + hash + '"]').tab('show');
   

   그리고 내 전체 JS 코드는

   $('#myTab a').click(function(e) {
     e.preventDefault();
     $(this).tab('show');
   });
   
   // store the currently selected tab in the hash value
   $("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
     var id = $(e.target).attr("href").substr(1);
       if(history.pushState) {
           window.history.pushState(null, null, '#' + id);
       }
       else {
           window.location.hash = id;
       }
      // window.location.hash = '#!' + id;
   });
   
   // on load of the page: switch to the currently selected tab
   var hash = window.location.hash;
   // console.log(hash);
   $('#myTab a[href="' + hash + '"]').tab('show');
   

9. ---

   9.laravel 프레임 워크를 사용하는 경우, 나는 내 해시를 삭제 이후 route-> 다시 () 함수를 사용하여 몇 가지 문제가 있었다. 내 해시를 유지하기 위해, 나는 간단한 함수를 만들었습니다 :

   laravel 프레임 워크를 사용하는 경우, 나는 내 해시를 삭제 이후 route-> 다시 () 함수를 사용하여 몇 가지 문제가 있었다. 내 해시를 유지하기 위해, 나는 간단한 함수를 만들었습니다 :

   $(function() {   
       if (localStorage.getItem("hash")    ){
        location.hash = localStorage.getItem("hash");
       }
   }); 
   

   나는 다음과 같은 기능을 내 다른 JS에서 설정 :

   localStorage.setItem("hash", myvalue);
   

   당신은 당신의 로컬 스토리지 값을 어떤 식 으로든 당신과 같은 이름을 지정할 수 있습니다; 내 이름 해시.

   해시는 다음 PAGE1에 설정되어있는 경우 따라서 PAGE2로 이동; 당신이 PAGE2에 돌아 가기를 클릭 할 때 해시 PAGE1에 다시 생성됩니다.

from https://stackoverflow.com/questions/3870057/how-can-i-update-window-location-hash-without-jumping-the-document by cc-by-sa and MIT license