Membuka tautan di jendela baru menggunakan jQuery

Photo By Team on Unsplash

Mengelola tautan di situs web merupakan hal yang penting dalam memberikan pengalaman pengguna yang baik. Salah satu praktik umum yang sering diterapkan adalah membuka tautan di tab atau jendela baru menggunakan jQuery.

Tautan baru tersebut mengarah ke situs eksternal. Dengan begitu, pengguna bisa tetap berada di halaman yang sedang mereka jelajahi tanpa harus kehilangan akses ke konten yang sudah ada. Nah, pada artikel kali ini, kita akan membahas cara membuka tautan di jendela baru menggunakan jQuery. Yuk, kita mulai!

Yang harus diketahui, mengapa kita menggunakan jQuery? jQuery adalah library JavaScript yang sangat populer dan memudahkan kita dalam memanipulasi elemen HTML.

Dibandingkan menulis kode JavaScript dari awal, jQuery menawarkan fungsi yang lebih singkat dan efektif. Selain itu, jQuery kompatibel dengan hampir semua browser, sehingga kita tidak perlu khawatir dengan masalah kompatibilitas.

Selanjutnya, dengan jQuery, kita bisa dengan mudah mengelola berbagai elemen dalam website, termasuk tautan. Jadi, jika kamu ingin memastikan bahwa tautan tertentu terbuka di jendela baru, jQuery akan menjadi alat yang sangat membantu.

Untuk langkah awal, kamu tentu perlu menentukan tautan mana yang ingin dibuka di jendela baru. Biasanya, tautan eksternal (tautan yang mengarah ke situs lain) adalah yang paling sering dibuka di jendela baru.

Agar lebih mudah, kita bisa menggunakan selektor CSS untuk memilih semua tautan yang memiliki atribut target=”_blank”. Dengan cara ini, kita tidak perlu mengedit setiap elemen secara manual. Berikut contohnya :

<a href="https://www.situs-eksternal.com" target="_blank">Kunjungi Situs Eksternal</a>

Namun, bagaimana jika kamu ingin menambahkan fungsionalitas ini ke semua tautan eksternal secara otomatis menggunakan jQuery? Hal ini sangat Mudah! Kita bisa memanfaatkan kode jQuery yang akan kita bahas pada bagian berikutnya.

Setelah menentukan tautan mana yang ingin dibuka di jendela baru, langkah selanjutnya adalah menerapkan jQuery. Kamu bisa menambahkan skrip di bagian bawah HTML atau di dalam file JavaScript terpisah. Berikut kode sederhana yang bisa kamu gunakan :

$(document).ready(function() {
    $('a[href^="http"]').attr('target', '_blank');
});

Selanjutnya, apa yang akan terjadi? Pertama, kita menggunakan jQuery untuk menunggu sampai dokumen sepenuhnya dimuat dengan menggunakan fungsi $(document).ready().

Setelah halaman siap, kita memilih semua elemen a yang href-nya dimulai dengan “http” (artinya ini adalah tautan eksternal). Kemudian, kita menggunakan metode .attr() untuk menambahkan atribut target=”_blank” pada elemen-elemen tersebut.

Mungkin kamu bertanya-tanya, kenapa harus menggunakan jQuery untuk membuka tautan di jendela baru? Jawabannya adalah efisiensi dan fleksibilitas. Dengan jQuery, kamu bisa mengelola banyak tautan sekaligus tanpa perlu menambahkan target=”_blank” secara manual pada setiap tautan.

Selain itu, jQuery memungkinkan kamu dengan mudah mengubah logika. Hal ini penting jika suatu saat nanti ada perubahan kebutuhan.

Misalnya, jika kamu ingin menambahkan fungsionalitas ini hanya pada tautan yang mengarah ke situs selain domain kamu sendiri, kamu bisa memperluas kodenya seperti ini :

$(document).ready(function() {
    $('a[href^="http"]').not('[href*="' + location.hostname + '"]').attr('target', '_blank');
});

Kode di atas memastikan bahwa hanya tautan eksternal yang benar-benar mengarah ke situs selain domain kamu yang akan dibuka di jendela baru. Cukup praktis, bukan?

Dengan menggunakan jQuery, membuka tautan di jendela baru menjadi lebih mudah dan efisien. Selain memberikan pengalaman pengguna yang lebih baik, kamu juga menghemat waktu dalam pengelolaan tautan di situsmu.

Cobalah kode di atas dan lihat bagaimana fungsionalitas ini dapat membuat situs kamu lebih dinamis dan ramah pengguna!

Itulah artikel Membuka tautan di jendela baru menggunakan jQuery yang dapat Mangcoding sharing. Mudah-mudahan artikel ini bisa bermanfaat dan dapat memberikan pengetahuan baru untuk Anda. Jika ada kritik serta saran yang dapat membangun, silahkan komentar atau kirim melalui Email dan Media sosial Mangcoding.