window.location을 업데이트하려면 어떻게 해야 합니까?문서를 건너뛰지 않고 해시하시겠습니까?

window.location을 업데이트하려면 어떻게 해야 합니까?문서를 건너뛰지 않고 해시하시겠습니까?

제 웹사이트에 슬라이딩 패널이 설치되어 있습니다.

애니메이션이 끝나자 해시를 이렇게 설정했습니다.

function() {
   window.location.hash = id;
}

(이것은 콜백이고, 그리고.id이전에 할당됨).

이것은 사용자가 패널을 책갈피로 지정할 수 있게 해주며, 자바스크립트가 아닌 버전이 작동할 수 있게 해줍니다.

그러나 해시를 업데이트하면 브라우저가 해당 위치로 이동합니다.이것은 예상된 행동인 것 같습니다.

제 질문은: 어떻게 하면 이것을 막을 수 있을까요?즉, 창의 해시는 변경할 수 있지만 해시가 있는 경우 브라우저에서 요소로 스크롤하지 않도록 하려면 어떻게 해야 합니까?모종의event.preventDefault()어떤 종류의 것?

저는 jQuery 1.4와 scrollTo 플러그인을 사용하고 있습니다.

감사합니다!

갱신하다

여기 패널을 변경하는 코드가 있습니다.

$('#something a').click(function(event) {
    event.preventDefault();
    var link = $(this);
    var id = link[0].hash;

    $('#slider').scrollTo(id, 800, {
        onAfter: function() {

            link.parents('li').siblings().removeClass('active');
            link.parent().addClass('active');
            window.location.hash = id;

            }
    });
});

최신 브라우저에서 history API를 사용하여 이전 브라우저로 폴백할 수 있는 해결 방법이 방법은 다음과 같습니다.

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

Lea Verou에게 크레딧이 갑니다.

문제는 당신이 window.location을 설정하고 있다는 것입니다.요소의 ID 특성에 대한 해시입니다.사용자가 "기본값()을 방지"하는지 여부에 관계없이 브라우저가 해당 요소로 이동할 것으로 예상되는 동작입니다.

이 문제를 해결하는 한 가지 방법은 해시에 다음과 같은 임의 값을 추가하는 것입니다.

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);

싸고 고약한 해결책..추한 #! 스타일을 사용합니다.

설정 방법:

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

읽기:

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

페이지에 닻이나 id와 일치하지 않기 때문에 점프하지 않습니다.

현재 스크롤 위치를 가져와서 변수에 넣은 다음 해시를 할당하고 페이지 스크롤을 원래 위치로 되돌리는 것은 어떻습니까?

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

이것은 효과가 있을 것입니다.

저는 다음과 같이 최신 브라우저용 Attila Fullop(Lea Verou) 솔루션과 기존 브라우저용 Gavin Brock 솔루션을 조합하여 사용했습니다.

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

Gavin Brock에 의해 관찰된 바와 같이, ID를 다시 캡처하려면 문자열(이 경우 "!"을 가질 수 있는지 여부)을 다음과 같이 처리해야 합니다.

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

그 전에 사용자 706270이 제안한 것과 유사한 솔루션을 시도해 보았지만, Internet Explorer에서는 잘 작동하지 않았습니다. Javascript 엔진이 매우 빠르지 않기 때문에 스크롤이 증가하거나 감소하여 시각적으로 좋지 않은 효과를 내는 것을 알 수 있습니다.

이 해결책은 저에게 효과가 있었습니다.

설정 location.hash페이지에서 발견되면 해당 ID로 페이지가 이동합니다.

의 window.history.pushState즉, 사용자가 클릭하는 각 탭에 대한 기록에 항목을 추가합니다.그런 다음 사용자가 다음을 클릭합니다.back버을누르이탭이다니합동로으전 (도 있고 .)(이것이 당신이 원하는 것일 수도 있고 아닐 수도 있습니다.그것은 내가 원했던 것이 아니었습니다).

나를 위해.replaceState현재 기록만 대체한다는 점에서 더 나은 옵션이었기 때문에 사용자가 클릭할 때back버튼을 누르면 이전 페이지로 이동합니다.

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

MDN에서 History API 문서를 확인하십시오.

이 솔루션은 저에게 효과가 있었습니다.

// 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');

원래 요소를 변경할 수 있을지는 모르겠지만 id 특성을 사용하는 것에서 data-id와 같은 다른 요소로 전환하는 것은 어떻습니까?그런 다음 해시 값에 대한 data-id 값을 읽기만 하면 점프하지 않습니다.

라벨 프레임워크를 사용할 때 route->back() 함수를 사용하면 해시가 지워져서 문제가 있었습니다.해시를 유지하기 위해 간단한 함수를 만들었습니다.

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

그리고 다른 JS 기능에 다음과 같이 설정했습니다.

localStorage.setItem("hash", myvalue);

할 수 . 내은 원는대로로스값지의이지수름있정, 내이은름며입니다.hash.

따라서 해시가 PAGE1에서 설정된 후 PAGE2로 이동하면 PAGE2에서 Back을 클릭하면 PAGE1에서 해시가 다시 생성됩니다.

언급URL : https://stackoverflow.com/questions/3870057/how-can-i-update-window-location-hash-without-jumping-the-document