Chrome에서 window.location.hash 새로 고침?

Question

웹에서 스누핑을하고 있었는데 window.location.hash = "etc"이 페이지를 다시로드하거나 새로 고치지 않고 브라우저의 위치를 ​​업데이트하는 데 널리 채택 된 방법으로 나타났습니다. 나는 이것에 I가 요리 한 것을 적용했습니다 ... 사파리에서 잘 http://dl.dropbox.com/u/1595444/locationExample/index.html

작품을하지만,

내가 발견 한 것은 그 10 + 크롬에서 hash 변경시 :

재 장전과 비슷한 것이 있습니다.

결과 증상은 사용자가 위 또는 아래로 스크롤 할 때 발생하는 딸꾹질입니다.

내 콘솔 출력이 보존됩니다 (콘솔을 점검하면 프로젝트 문자열이 출력됩니다).

favicon이 다시로드되는 것 같습니다.

이전에이 문제가 발생한 사람이 있습니까? 수정 사항을 아십니까?

Answer 1

가 대부분 여기에 무슨 두 가지가 있습니다

• 파비콘 정지/재생 버튼이 깜박 인해 a Chrome bug (pushState을 언급하지만, 해시 변화가 동일한 코드 경로에 됩니다).
• 스크롤 할 때 발생하는 약간의 문제는 Chrome에서 전체 페이지를 다시 칠하고 페이지 축소판을 업데이트하기위한 고품질 척도를 사용하기 때문에 새 URL 생성과 같이 해시 변경을 고려하고 있기 때문입니다. 또한 a bug입니다. 검사기 타임 라인보기에서 이것을 볼 수 있습니다. 대부분의 스크롤 이벤트는 창 너비 x 약간 작은 높이으로 다시 칠해 지지만, 전체 창이 다시 칠해지는 경우가 있습니다. This blog post에는 몇 가지 세부 정보가 있습니다.

사용자가 스크롤을 마칠 때까지 (현재 항목 아래에 나타나는 흰색 막대를 즉시 업데이트 할 수 있음) 두 가지 모두에 대한 해결 방법은 해시 업데이트를 연기하는 것입니다. 당신이 좋아하는 일을함으로써이 작업을 수행 할 수 있습니다

var scrollTimeout; 
window.onscroll = function() { 
    // update current item display here 
    if (scrollTimeout) 
    clearTimeout(scrollTimeout); 
    scrollTimeout = setTimeout(function() { 
    scrolTimeout = undefined; 
    // update hash here 
    }, 100); 
}; 

당신이 jQuery를 사용하고있는 것 같습니다 때문에, 도움이 될 수 debouncing plugins있다.

Answer 2

나는 확실한 대답을 가지고 있지 않지만, 처음에는 시도 할 것 :

1. 값에 해시 기호 (#)를 붙이는 (예하면 window.location.hash 사용 = "#etc") .
2. window.onhashchange 처리기에 대한 처리기를 등록하십시오.
3. 또는 수행하려는 작업이 이전 논리 위치로 돌아가는 것을 목표로하고 있다면 (history.pushState) 고려해 볼 수 있습니다. 수행하려는 작업이 나에게 명확하지 않습니다. 페이지, 또는 뭔가 더 복잡한).

Answer 3

var r='#hello'; 
if(navigator.userAgent.indexOf('Chrome/')!=-1){ 
top.history.pushState("", "", r); 
return; 
}; 
if(r.charAt(0)=='/'){ 
    top.location.replace(r); 
}else{ 
    top.location.hash=r; 
}; 

나를 위해 일했습니다. 그리고 실제로이 사실을 파악하는 데 오랜 시간이 걸렸습니다. Firefox는 또한 history 객체를 지원하므로 몇 년 안에 전체 "해시"문제를 제거 할 수 있습니다.

편집 : 예, 다시로드하는 것은 Chrome 버그입니다.