기록에 영향을주지 않고 해시 탐색을 사용할 수 있습니까?


100

나는 그것이 될 수 두려워 불가능 하지만 URL의 해시 값을 변경하는 방법이 브라우저의 역사에서 항목을 떠나지 않고다시로드하지 않고는 ? 아니면 동등합니까?

세부 사항에 관해서는 다음과 같은 몇 가지 기본 해시 탐색을 개발하고있었습니다.

//hash nav -- works with js-tabs
var getHash = window.location.hash;
var hashPref = "tab-";
function useHash(newHash) {
    //set js-tab according to hash
    newHash = newHash.replace('#'+hashPref, '');
    $("#tabs li a[href='"+ newHash +"']").click();
}
function setHash(newHash) {
    //set hash according to js-tab
    window.location.hash = hashPref + newHash;

    //THIS IS WHERE I would like to REPLACE the location.hash
    //without a history entry

}
    // ... a lot of irrelavent tabs js and then....

    //make tabs work
    $("#tabs.js-tabs a").live("click", function() {
        var showMe = $(this).attr("href");
        $(showMe).show();
        setHash(showMe);
        return false;
    });
    //hash nav on ready .. if hash exists, execute
    if ( getHash ){
        useHash(getHash);
    }

분명히 jQuery를 사용합니다. 아이디어는 이 특정 인스턴스에서 1) 사용자가 모든 탭 변경 사항을 되 돌리게하면 불필요한 참조를 쌓아서 효과적으로 '뒤로 버튼을 해제'할 수 있으며, 2) 새로 고침을 누르면 현재 탭을 유지하지 않는 것이 좋습니다. 성가심.


히스토리 추적을 원하지 않는데 왜 해시를 변경하고 싶습니까? : |
Ionuț Staicu

10
새로 고칠 때 사용자에게 탭을 표시하는 것이 가장 좋지만 탭 사이를 앞뒤로 넘길 수 있기 때문에 불필요하게 항목으로 기록을 넘쳐서 뒤로 버튼이 실제로 유용하지 않게됩니다. 그러나 이것은 단지 예일뿐입니다. 임시 상태를 저장해야하지만 쿠키에 의존하거나 사용자의 임시 파일을 채우고 싶지 않을 때 언제든지 가능합니다. 새로 고침 할 때 js 콘텐츠는 페이지를 떠나지 않았고 이동 지점이나 의사 페이지가 아니므로 페이지를 떠난 것과 같습니다. 따라서 기록 항목은 표준 탐색 만 방해 할 수 있습니다.

답변:


95

location.replace("#hash_value_here");IOS Chrome에서 작동하지 않는다는 것을 알 때까지 잘 작동했습니다. 이 경우 다음을 사용하십시오.

history.replaceState(undefined, undefined, "#hash_value")

history.replaceState () 는 replaceState ()가 새 기록 항목을 만드는 대신 현재 기록 항목을 수정한다는 점을 제외하면 history.pushState ()와 똑같이 작동합니다.

#또는 URL의 마지막 부분 을 유지하는 것을 잊지 마십시오 .


3
완전히 최신 브라우저로가는 길입니다. 부분 지원 세션 내역 관리가 있다는 것을 알고 있어야합니다 .
Matt

나는 이것을 사용하는 방법에 대해 혼란 스럽습니다. 나는 아직도 사용해야 window.location.hash = 'my-hash';다음에 history.replaceState(undefined, undefined, "#my-hash")?
Bram Vanroy

2
@BramVanroy 아니요, 후자를 사용하는 것으로 충분합니다.
Lucia

2
: target 선택기를 사용하지 않는 한 ... 사양의 해당 부분 (히스토리 작업과의 css 상호 작용)이 현재 정의되지 않은 것처럼 보이고 대부분의 / 모든 브라우저에서 스타일이 히스토리 교체시 다시 계산되지 않으므로 히스토리 함수는 쓸모가 없습니다.
morphles jul.

@Luxiyalu, 어떻게 history.replaceState다른 location.replace가요?
Pacerier

99
location.replace("#hash_value_here"); 

위는 당신이 추구하는 것을하는 것 같습니다.


4
이거 야. 그리고 uri 세그먼트가있는 경우 location.replace (window.location + "#hash")가이를 보존합니다.
tedders

7
이 방법을 두 번째로 훨씬 더 깨끗하게 정답으로 표시되기를 바랍니다.
joeellis

14
window.location.replace(('' + window.location).split('#')[0] + '#' + hash);단지 해시 업데이트에
johnstorm

1
Windows 8의 Chrome 30에서 테스트 중입니다. Chrome 기록으로 이동하여 내 테스트 URL에서 "이 사이트에서 더보기"를 선택하면이 방법으로 추가 된 모든 해시를 볼 수 있습니다.
Alex Vang 2013 년

1
location.replace ( '# hash_value_here')는 경로가 아닌 해시 조각 만 변경하므로 페이지로드를 트리거하지 않습니다. 문서에 기본 태그 <base href ="http://example.com/" /> 가 포함 된 경우 제외 : 기본 태그 가 포함 된 경우 , 당신이 단지 선행과 함께 replace 메소드를 사용하면 "#hash_value_here"실제로는`location.replace ( ' example.com/#hash_value_here' ) 라고 말한 것과 같습니다 . 여기에서 읽어 보면 분명해 보이지만 경로 조각이있는 페이지에 있고 기본이 설정되어 있다는 사실을 모르면 문제가됩니다.
Tyler Kasten

6

편집 : 이제 몇 년이 지났고 브라우저가 진화했습니다.

@Luxiyalu의 대답 은 갈 길입니다.

- 이전 답변 -

저도 불가능하다고 생각합니다 (현재로서는). 하지만 해시 값을 사용하지 않을 경우 왜 변경해야합니까?

프로그래머로서 해시 값을 사용하는 주된 이유는 사용자가 페이지를 북마크하거나 브라우저 기록에 상태를 저장하도록하는 것입니다. 이 작업을 수행하지 않으려면 상태를 변수에 저장하고 거기에서 작업하십시오.

해시를 사용하는 이유는 우리가 통제 할 수없는 값으로 작업하기 때문이라고 생각합니다. 필요하지 않다면 아마도 모든 것이 당신의 통제하에 있다는 것을 의미 할 것이므로 변수에 상태를 저장하고 작업하십시오. (나는 반복하는 것을 좋아한다)

도움이 되었기를 바랍니다. 문제에 대한 더 쉬운 해결책이있을 수 있습니다.

업데이트 : 어때요?

  1. 첫 번째 해시를 설정하고 브라우저 기록에 저장되는지 확인합니다.
  2. 새 탭이 선택되면 수행 window.history.back(1)하십시오. 그러면 첫 번째 init 해시에서 기록이 되돌아갑니다.
  3. 이제 새 해시를 설정 했으므로 탭은 기록에 하나의 항목 만 만듭니다.

뒤로 돌아가서 현재 항목을 "삭제"할 수 있는지 또는 첫 번째 단계를 건너 뛰는 경우 몇 가지 플래그를 사용해야 할 것입니다. 그리고 .NET Framework를 강제 실행할 때 "해시"에 대한로드 메서드가 실행되지 않도록합니다 history.back.


내가 놓친 기본적인 것이있을 가능성이 매우 높습니다 (고갈은 좋은 변명입니다. 그와 함께 갈 것입니다).하지만 다시로드 할 때 변경된 값을 유지할 변수를 설정할 수 있다고 말하는 건가요? 쿠키 말고요? (쿠키가 과도하게 보이는데 ..) 아마도 그게 분명하지 않은 것 같습니다. 특히 다시로드 할 때 해시 값을 사용합니다. 응답 해 주셔서 감사합니다!

내 설명을 명확히하기 위해 : 사용자가 다시로드를 누르는 경우. 그것이 해시의 목적입니다. 나는 여전히 정상적인 사용 (탭 변경 / 클릭)에서 다시로드를 피하려고 노력하고 있습니다.

좋습니다. 다시로드 한 후 정보를 위해 몇 가지 값을 사용하게됩니다. 불행히도 해시 값은 일부 브라우저의 기록에 의해 선택됩니다. 이렇게 말해서 미안하지만 제 특급에서 쿠키가 최선의 방법입니다. 브라우저 기록이 감지하지 못하는 것을 원하지만, 불행히도 쿠키를 새로 고침 한 후에 유지하려면. 사용자가 링크를 클릭 한 경우 링크를 쿼리 ( ?mystate=greatness)로 설정할 수 있습니다. 아약스 일 필요는 없지만 요청을 초기화 할 때 읽을 수 있도록 자바 스크립트 정보를 저장할 수 있습니다.
guzart

예, 해시는
새로 고침을 눌렀을

네, 당신이 옳다고 생각합니다. 아 글쎄. (겠습니까 사랑이 다른 방법 또는 무언가에 의해 입증 된 틀릴 수 있습니다.)

-1

하이퍼 링크에서 클릭 이벤트를 포착하기 위해 항상 이벤트 리스너를 만들고 콜백 함수에 e.preventDefault ()를 넣어 브라우저가 히스토리에 삽입하지 못하도록 할 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.