Online Web Tutorial

Membuka Tab Baru Otomatis dengan JQuery

Membuka Tab Baru Otomatis dengan JQuery

FSodic.ID - Selamat pagi para jomblo, apa kabarnya hari ini. Gimana semalam malam mingguan nggak? Atau ngumpet dikamar karena gak punya pacar Jomblo lama-lama kok betah Hari ini masih dengan tema yang sama dengan posting sebelumnya. Yap, JQuery. Banyak sebenernya library-library javascript diluar sana seperti bootstrap v5 yang juga sudah meninggalkan jquery dan sudah memasuki tahap alpha, dan masih banyak lagi yang lebih baru dan lebih powerful namun saya masih lebih suka dengan JQuery walaupun versi terakhir yang saya tau masih versi 3.5. Dan sudah ada roadmap untuk v3.6 dan v4.0.

Meskipun di WapBlog.ID sendiri saya masih memasang JQuery v3.1 namun tidak menutup kemungkinan setelah project ini wapblog akan mulai menyusun javascriptnya sendiri.

Oke tanpa banyak basa basi lagi, setelah sekian cerita diawal, kali ini kita ke pokok bahasan kita. Mungkin diantara kamu ada yang lupa atau lelah dengan menambahkan atribut target="_blank" untuk link-link yang mengarah ke situs lain secara manual. Nah diposting kali ini, kita bakal menambahkan jquery untuk membuat link-link tersebut otomatis memiliki atribut target.

Silahkan copy code berikut:

$('a').each(function(){
  if(typeof $(this).attr('href') !== 'undefined')
  {
    var __dXd = new RegExp('^http(s)?://www.fsodic.id', 'm');
    if($(this).attr('href').match(__dXd)){ } else {
      $(this).attr('target', '_blank');
    }
  }
});

Letakan dalam ready ya mblo agar ketika halaman selesai code baru akan dieksekusi.
Dari looping ini:
1. typeof $(this).attr('href') !== 'undefined'
Meninggalkan link yang tidak memiliki atribut href, atau yang memiliki nilai selain undefined atau ada nilainya (suka-suka kalian lah membacanya bagaimana).
2. new RegExp('^http(s)?://www.fsodic.id', 'm');
Adalah regular expression (RegExp) untuk mencari url blog kalian. Pada bagian pertama disebut pattern, dan bagian kedua disebut modifier. Nah pattern ini silahkan kalian ubah dengan url blog kalian masing-masing. Sedangkan tanda ^ menisyarakan bahwa RegExp akan dimulai dari awal. Selanjutnya ada (s)? yang memerintahkan code tetap dieksekusi dengan atau tanpa s. Artinya ketika situs yang ditargetkan tidak dibuka dalam tab baru baik http atau https tidak akan ditambakan atribut target ataupun tidak akan dirubah ketika sudah memiliki target.

Nah itu tadi adalah penjelasan singkat dan rumit yang bisa saya sampaikan (mumet mikire mblo).

Untuk demo:

___

Oke mblo cukup sekian dari saya, salam sukses untuk wifi tetangga.