URL 해시 위치 가져 오기 및 jQuery에서 사용

현재 페이지의 URL에서 해시 값을 얻은 다음 새 함수에 적용 할 수 있습니다. 예 :

URL은

www.example.com/index.html#foo

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

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

나는 이것을 잡아서 그것을 두 번째 코드에서 사용할 수있는 변수로 바꾸는 방법이 있다고 가정 / 호핑하고 있습니다.

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

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

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

이 속성에는 이미 #시작 부분에 심볼 이 포함되어 있습니다 .

실제로 ID 선택기를:first 사용하기 때문에 의사 선택기 가 필요하지 않으며 ID는 DOM 내에서 고유 하다고 가정합니다 .

URL 문자열에서 해시를 얻으려면 다음 String.substring방법을 사용할 수 있습니다 .

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

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

location.hash는 IE (IE9 포함)의 경우 페이지에 iframe이 포함 된 경우 iframe 콘텐츠 내에서 수동 새로 고침 후 location.hash 값이 old (첫 번째 페이지로드 값)를 얻는 경우 IE에 안전하지 않습니다 . 수동 검색 값은 location.hash와 다르므로 항상 document.URL을 통해 검색하십시오.

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

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

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

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

jQuery 1.9부터는 :target셀렉터가 URL 해시와 일치합니다. 그래서 당신은 할 수 있습니다 :

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

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

현재 페이지에 해시가 있으면 먼저 더 나은 cek을 제안합니다. 그렇지 않으면입니다 undefined.

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

@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...
    }
});