URL 해시 위치를 가져와 jQuery에서 사용

URL 해시 위치를 가져와 jQuery에서 사용

현재 페이지의 URL에서 해시 후 값을 얻은 다음 새 기능에 적용할 수 있으면 좋겠습니다.예를 들면

URL은 다음과 같습니다.

www.example.com/index.html#foo

그리고 저는 이것을 다음 코드와 함께 사용하고 싶습니다.

$('ul#foo:first').show();

저는 이것을 잡고 변수로 변환하여 두 번째 코드에서 사용할 수 있는 방법이 있기를 바랍니다.

편집자 참고 사항:아래의 접근 방식은 심각한 보안 영향을 미치며, 사용 중인 jQuery 버전에 따라 사용자가 XSS 공격에 노출될 수 있습니다.자세한 내용은 이 답변에 대한 설명 또는 Security Stack Exchange에 대한 설명에서 가능한 공격에 대한 설명을 참조하십시오.

속성을 사용하여 현재 페이지의 해시를 가져올 수 있습니다.

var hash = window.location.hash;
$('ul'+hash+':first').show();

이속에다포있습니다어되함음이가 포함되어 .#시작 부분의 기호입니다.

사실 당신은 그것이 필요하지 않습니다.:firstID 선택기를 사용하고 있기 때문에 유사 선택기는 ID가 DOM 내에서 고유한 것으로 가정됩니다.

URL 문자열에서 해시를 가져오려는 경우 다음 방법을 사용할 수 있습니다.

var url = "http://example.com/file.htm#foo";
var hash = url.substring(url.indexOf('#')); // '#foo'

조언: 사용자가 원하는 대로 해시를 변경할 수 있으며, 선택자에게 무엇이든 주입할 수 있으므로 사용하기 전에 해시를 확인해야 합니다.

로케이션해시는 IE에 안전하지 않습니다. IE(IE9 포함)의 경우, 페이지에 iframe이 포함된 경우, iframe 콘텐츠를 내부에서 수동으로 새로 고친 후 위치를 가져옵니다.해시 값이 old(첫 페이지 로드 값)인 반면 수동으로 검색한 값은 위치와 다릅니다.해시이므로 항상 document.URL을 통해 검색합니다.

var hash = document.URL.substr(document.URL.indexOf('#')+1) 

순수한 자바스크립트 솔루션을 찾는 사람들을 위해.

 document.getElementById(location.hash.substring(1)).style.display = 'block'

시간이 좀 절약되기를 바랍니다.

jQuery 1.9 이후에는 선택기가 URL 해시와 일치합니다.그래서 당신은 할 수 있습니다.

$(":target").show(); // or $("ul:target").show();

해시와 일치하는 ID를 가진 요소를 선택하여 표시합니다.

저는 이것을 @CMS의 답변에 명시된 보안 문제를 해결하기 위해 사용하고 있습니다.

// example 1: www.example.com/index.html#foo

// load correct subpage from URL hash if it exists
$(window).on('load', function () {
    var hash = window.location.hash;
    if (hash) {
        hash = hash.replace('#',''); // strip the # at the beginning of the string
        hash = hash.replace(/([^a-z0-9]+)/gi, '-'); // strip all non-alphanumeric characters
        hash = '#' + hash; // hash now equals #foo with example 1

        // do stuff with hash
        $( 'ul' + hash + ':first' ).show();
        // etc...
    }
});

현재 페이지에 해시가 있는지 먼저 확인하는 것이 좋습니다.그렇지 않으면 그렇게 될 것입니다.undefined.

$(window).on('load', function(){        
    if( location.hash && location.hash.length ) {
       var hash = decodeURIComponent(location.hash.substr(1));
       $('ul'+hash+':first').show();;
    }       
});

나는 표시된 답이 나에게 충분하지 않다는 것을 알았습니다.URL에서 해시를 얻는 것은 보안상의 큰 결함을 가지고 있지만 이에 대항할 실질적인 방법을 제공하지는 않는다고 명시되어 있습니다.만약 당신이 그 경로를 가고 싶다면 URL을 삭제하는 방법이 있지만, 당신이 단순히 시도하고 있다면.show()컨테이너를 사용하거나 해시 매칭 ID 컨테이너에 CSS/클래스를 적용하면 훨씬 간단한 방법이 있습니다.

소개::target선택자

그:target유사 클래스는 URL의 fragment에 일치하는 ID를 가진 고유 요소를 나타냅니다. 즉, 다음과 같은 작업을 수행하여 JS를 적용할 수 있습니다.

$(':target').show();

또는 제 경우에는 CSS로만 원하는 요소를 숨깁니다.

:target {
    display: block;
}

OP의 대답이 거의 정확히 13년 전이라는 것을 알지만, 이것은 URL을 얻고, 분할하고, 소독하지 않고도 동일한 효과를 얻을 수 있는 훨씬 쉽고 안전한 방법입니다. 그리고 지옥에서, 당신은 심지어 이 방법으로 JS를 완전히 피할 수 있습니다.

그리고 예, :target selector는 잘 지원됩니다.

언급URL : https://stackoverflow.com/questions/1822598/getting-url-hash-location-and-using-it-in-jquery