Artikel kali ini akan membahas tentang script jQuery yang sederhana saja. Maklum sedang dihinggapi rasa malas membuat demo yang cukup kompleks dan lagi sedang mempelajari Repository GitHub, karena rencananya kedepan untuk arsip-arsip artikel yang dibuat akan di simpan sebagian pada GitHub dengan tujuan memancing minat orang lain untuk ikut mengembangkannya dan memperbaiki kesalahan-kesalahan yang ada. Script jQuery kali ini mengenai cara menambahkan attribut target="_blank" pada setiap tag anchor link yang mengarah pada situs eksternal. Karena kadang kita cukup repot jika harus selalu menambahkan attribut target="_blank" pada tautan-tautan yang diarahkan pada situs diluar URL situs kita sendiri. Biasanya karena terlalu banyaknya tautan situs luar kita lupa menambahkan attribut target="_blank". Daripada repot-repot harus selalu menambahkan attribut target="_blank" maka kita buat semuanya menjadi otomatis melalui bantuan jQuery. jQuery akan melakukan penyaringan terhadap tautan yang mengarah keluar dan kemudian menambahkan attribut target="_blank" pada setiap tag anchor eksteral. Perpustakaan jQuery yang akan digunakan adalah .not(). Perpustakaan ini termasuk pada kategori perpustakaan penyaring (filter) dan pelintas (traversing).
Skenario HTML
Misalkan kita memiliki 4 buah link tautan seperti dibawah ini:<a href="/">Beranda</a>
<a href="/p/kontak.html">Kontak</a>
<a href="http://www.hendriono.web.id">Tentang</a>
<a href="http://www.google.co.id">Google</a>
Pada skenario HTML diatas, kita sudah menentukan 4 buah link tautan, 2 link tautan merupakan URL lokal yaitu Beranda dan Kontak, sedangkan 2 link tautan mengarah ke luar dari situs sendiri yaitu Tentang dan Google. Ketika halaman di load maka jQuery akan melakukan seleksi terhadap URL yang bukan bagian dari URL lokal dan kemudian akan menambahkan attribut target="_blank" pada situs tautan luar tersebut.
Skenario jQuery
Agar jQuery bisa melakukan seleksi terhadap URL tautan luar, maka kita akan menggunakan perpustakaan .not() sebagai penyaringnya. Maka kode ditulis sebagai berikut:
Fungsi Penyaringan
Dibawah ini merupakan script yang digunakan untuk melakukan penyaringan terhadap URL tautan keluar.
function target_luar(){
try{
if(top.location != location){
jQuery("a[href^='http']").not("[href*='"+location.host+"']").attr('target','_blank');
}
}
catch(err){}
}
Jika anda ingin menambahkan attribut lebih dari satu, maka fungsi .attr ditulis seperti ini:Ganti script dibawah ini:
.attr('target','_blank')
Dengan script dibawah ini:.attr({
target:'_blank',
rel:'nofollow'
})
Penjelasan Fungsi
Dibawah ini penjelasan bagaimana fungsi penyaringan bekerja.
function target_luar(){
Ini digunakan untuk meregistrasikan fungsi dengan nama target_luartry{
Fungsi akan melakukan percobaan pemeriksaan...if(top.location != location){
Proses pemeriksaan seluruh tautan (top.location) pada halaman yang di load dan jika hasilnya tidak sama dengan lokasi URL utama/lokal maka...
jQuery("a[href^='http']").not("[href*='"+location.host+"']").attr('target','_blank');
jQuery akan melakukan pemeriksaan terhadap tag anchor attribute href yang berisi http, jika tidak sama (.not) dengan attribut href yang berisi URL lokal, maka attribut target="_blank" akan ditambahkan
}Proses pemeriksaan dan penyaringan dengan jQuery ditutup
}Proses percobaan pemeriksaan dengan JavaScript di tutup
catch(err){}
Fungsi tidak akan melakukan apa-apa jika ternyata terjadi error}Registrasi fungsi target_luar ditutup
Fungsi Load Penyaringan
Setelah fungsi penyaringan dibuat, maka selanjutnya adalah proses load/pemanggilan fungsi agar jQuery bisa melakukan eksekusi terhadap URL eksternal, maka fungsi ditulis seperti dibawah ini:
jQuery(document).ready(function(){
target_luar();
});
Keseluruhan Fungsi
Jika fungsi penyaringan dan fungsi load penyaringan di satukan maka akan menjadi seperti dibawah ini:jQuery(document).ready(function(){
target_luar();
});
function target_luar(){
try{
if(top.location != location){
jQuery("a[href^='http']").not("[href*='"+location.host+"']").attr('target','_blank');
}
}
catch(err){}
}
Kesimpulan
Cara diatas adalah alternatif yang bisa digunakan, namun semua kembali kepada tujuan pemilik blog, apakah perlu untuk menambahkan attribut target="_blank" atau tidak. Fungsi diatas hanya satu dari sekian banyak cara untuk menambahkan attibute target="_blank", jadi mohon ma'af jika anda merasa artikel ini sangat-sangat tidak bermanfaat dan ketinggalan jaman. Anggaplah ini hanya sebuah hal kecil yang tidak penting untuk anda pelajari... Selamat mencoba dan semoga berhasil... Happy Blogging :)
Pranala Luar:
