Saya ingin mendapatkan nilai setelah hash di URL halaman saat ini dan kemudian dapat menerapkannya di fungsi baru ... mis.
URL bisa jadi
www.example.com/index.html#foo
Dan saya ingin menggunakan ini bersama dengan potongan kode berikut
$('ul#foo:first').show();
Saya berasumsi / berharap ada cara untuk mengambil ini, dan mengubahnya menjadi variabel yang kemudian dapat saya gunakan di bagian kode kedua.
'ul#foo:first'tidak masuk akal karena ID harus unik, oleh karena itu menambahkan :firstke pemilih berlebihan, kecuali Anda menduplikasi ID yang tidak valid. Perhatikan bahwa bahkan satu dekade lalu, ID berulang masih tidak valid.
Jawaban:
Catatan editor: pendekatan di bawah ini memiliki implikasi keamanan yang serius dan, tergantung pada versi jQuery yang Anda gunakan, dapat membuat pengguna Anda terkena serangan XSS. Untuk lebih jelasnya lihat pembahasan kemungkinan serangan di komentar di jawaban ini atau penjelasan di Security Stack Exchange ini .
Anda dapat menggunakan location.hashproperti untuk mengambil hash dari halaman saat ini:
var hash = window.location.hash;
$('ul'+hash+':first').show();
Perhatikan bahwa properti ini sudah berisi #simbol di awal.
Sebenarnya Anda tidak memerlukan :firstpseudo-selector karena Anda menggunakan ID selector , diasumsikan bahwa ID dalam DOM unik .
Jika Anda ingin mendapatkan hash dari string URL, Anda dapat menggunakan String.substringmetode:
var url = "http://example.com/file.htm#foo";
var hash = url.substring(url.indexOf('#')); // '#foo'
Saran: Ketahuilah bahwa pengguna dapat mengubah hash sesuai keinginannya, memasukkan apa pun ke pemilih Anda, Anda harus memeriksa hash sebelum menggunakannya.
var hash = location.hash.slice(1); $('ul.item'+hash).show().append($('#content'));ini akan menjalankan tag skrip yang dimasukkan ke dalam hash. Ini adalah kebiasaan yang baik untuk digunakan $('body').find('ul'+hash+':first')sebagai gantinya $('ul'+hash+':first').
var hash = location.hash.replace('#', '');
$(userInput)umumnya tidak aman karena $kelebihan beban dan mungkin mencari node yang ada atau membuat yang baru tergantung pada apakah string berisi <>karakter. $(document).find(userInput)akan selalu mencari node yang ada sehingga kurang aman. Meskipun demikian, praktik terbaiknya adalah selalu membersihkan input pengguna, misalnya jika Anda menggunakan id alfanumerik, pastikan itu alfanumerik.
location.hash tidak aman untuk IE , dalam kasus IE (termasuk IE9), jika halaman Anda berisi iframe, maka setelah refresh manual di dalam konten iframe dapatkan nilai location.hash lama (nilai untuk pemuatan halaman pertama). sedangkan nilai yang diambil secara manual berbeda dari location.hash jadi selalu ambil melalui document.URL
var hash = document.URL.substr(document.URL.indexOf('#')+1)
Bagi mereka yang mencari solusi javascript murni
document.getElementById(location.hash.substring(1)).style.display = 'block'
Semoga ini menghemat waktu Anda.
Sejak jQuery 1.9, :targetpemilih akan cocok dengan hash URL. Jadi Anda bisa melakukan:
$(":target").show(); // or $("ul:target").show();
Yang akan memilih elemen dengan ID yang cocok dengan hash dan menampilkannya.
:targetsebagai string? Jika demikian saya tidak percaya begitu.
Saya sarankan lebih baik cek dulu jika halaman saat ini memiliki hash. Kalau tidak, itu akan terjadi undefined.
$(window).on('load', function(){
if( location.hash && location.hash.length ) {
var hash = decodeURIComponent(location.hash.substr(1));
$('ul'+hash+':first').show();;
}
});
Saya menggunakan ini untuk mengatasi implikasi keamanan yang dicatat dalam jawaban @ 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...
}
});