web-dev-qa-db-ja.com

URLハッシュの場所を取得し、jQueryで使用する

現在のページのURLのハッシュの後に値を取得し、これを新しい関数に適用できるようにしたい...

URLは

www.example.com/index.html#foo

そして、私はこれを次のコードと組み合わせて使用​​したいと思います

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

私はこれをつかみ、それを変数に変えて2番目のコードで使用できる方法があると仮定/期待しています。

jqueryurlhashfragment-identifier
128
Robbie White

編集者注：以下のアプローチには深刻なセキュリティへの影響、および使用しているjQueryのバージョンによっては、ユーザーをXSS攻撃にさらす可能性があります。詳細については、この回答のコメントで考えられる攻撃の説明を参照するか、または セキュリティスタック交換に関するこの説明 。

location.hash プロパティを使用して、現在のページのハッシュを取得できます。

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

このプロパティにはすでに#シンボルが最初に含まれていることに注意してください。

IDセレクター を使用しているため、実際には:first擬似セレクターは必要ありません。IDはunique DOM内。

URL文字列からハッシュを取得する場合は、 String.substring メソッドを使用できます。

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

アドバイス：ユーザーはハッシュを必要に応じて変更できることに注意してください 、セレクタに何かを注入する場合、ハッシュを使用する前にチェックする必要があります。

267
CMS

IEではlocation.hashは安全ではありません、IE（IE9を含む）の場合、ページにiframeが含まれている場合、iframeコンテンツ内の手動更新後にlocation.hashの値はold（最初のページのロードの値）。手動で取得した値はlocation.hashとは異なるため、常にdocument.URLから取得します

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

純粋なJavaScriptソリューションをお探しの方へ

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

これで時間を節約できることを願っています。

2
Matas Vaitkevicius

JQuery 1.9以降、 :target セレクターはURLハッシュと一致します。だからあなたができる：

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

ハッシュに一致するIDを持つ要素を選択して表示します。

1
j08691

現在のページにハッシュがある場合は、最初にcekをお勧めします。それ以外の場合、undefinedになります。

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