Hyperlink yang berguna dengan JavaScript

di sana anda gembira melayari laman web; Anda mengklik pautan dan tiba -tiba mendapati diri anda di laman web lain diminta memuat turun fail. Apa yang berlaku di sana? Menjengkelkan, bukan? Harus ada cara yang lebih baik untuk menunjukkan kepada pelawat anda di mana pautan sedang berjalan dan jenis fail apa. Oleh itu, untuk membantu menyelesaikan kegusaran kecil ini, saya telah menulis sedikit JavaScript dan CSS yang menambah ikon yang cantik selepas pautan - bergantung pada sambungan dan lokasi fail - untuk menunjukkan kepada pengguna jenis dokumen yang mereka hendak memuatkan.

anda boleh memuat turun kod di sini, dan melihat contoh.

Takeaways Key

Artikel ini menyediakan penyelesaian JavaScript dan CSS untuk menambah ikon di sebelah hiperpautan, menunjukkan jenis fail pautan membawa kepada atau jika pautan membawa ke tapak luaran. Penyelesaian ini bertujuan untuk meningkatkan pengalaman pengguna dengan memberikan isyarat visual yang jelas.

• Penyelesaian ini direka untuk menjadi mudah, mudah digunakan, dan serasi dengan semua pelayar moden, termasuk IE6. Ia merendahkan dengan anggun apabila CSS atau JavaScript dilumpuhkan dan mengehadkan penggunaan fail ke satu fail JavaScript dan satu fail CSS.
• Penyelesaian ini melibatkan membuat fail JavaScript (ikonize.js) dan fail CSS (ikonize.css). Fail JavaScript menentukan lanjutan fail setiap hiperpautan dan menambah kelas dan ikon CSS yang sesuai. Fail CSS mengandungi kelas ikon.
• Penyelesaian ini mempunyai batasan: Ia tidak mengiktiraf pautan navigasi berasaskan rentetan pertanyaan, dan pautan mesti mempunyai sambungan fail untuk mempunyai ikon yang diberikan (melainkan jika ia adalah tapak luaran). Jika CSS dilumpuhkan, hanya ikon pautan luaran yang akan dipaparkan, dan jika JavaScript dilumpuhkan, tidak ada perubahan yang dapat dilihat pada halaman.
ringkas

Pertimbangan utama ketika membuat fungsi ini adalah:

kesederhanaan - ia mesti mudah digunakan

1. degradasi anggun - dalam kes CSS atau/dan JavaScript yang dilumpuhkan


2. penggunaan fail yang minimum - hanya satu JavaScript dan satu fail CSS


3. menjadikannya sebagai plug-and-play yang mungkin-jadi ia boleh ditambah dengan cepat ke tapak


4. Mengehadkan jumlah keseluruhan kod


5. keserasian dengan semua pelayar moden, termasuk IE6


Mengapa peralihan dari penyelesaian CSS sahaja?

Anda sudah boleh melakukan ini dalam CSS, menggunakan pemilih atribut. Berikut adalah contoh:

Jadi mengapa anda melakukannya dengan skrip, apabila kebanyakan pelayar moden akan memaparkan ikon menggunakan hanya CSS?

a[href$='.doc'] { <br>
  display: inline-block; <br>
  padding-left: 16px; <br>
  background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}

Jawapannya mudah: IE6. Semua pelayar yang baik menyokong pemilih atribut CSS3 ... kecuali IE6. Ini sedikit skrip dengan CSS menjadikan IE6 bermain dengan baik; Malah, ia juga berfungsi dalam IE5.5.

Inspirasi dan Kredit

Sebelum kita memulakan, saya ingin mengiktiraf ikon sutera yang sangat baik - dan percuma oleh Mark James di Famfamfam, yang akan kita gunakan dalam artikel ini.

Juga, kredit di mana kredit perlu dibayar: artikel ini diilhamkan oleh sekeping ikon teks dengan CSS oleh Alexander Kaiser, yang pada gilirannya diilhamkan oleh meminta CSS Guy yang menunjukkan isyarat hiperpautan dengan CSS. Di samping itu, saya telah menggunakan beberapa fungsi yang sangat baik yang ditulis oleh James Edwards, dan beberapa lagi yang diambil dari Perpustakaan JavaScript Core, yang ditulis oleh Kevin Yank dan Cameron Adams dan diabadikan dalam buku Sitepoint, Simply Javascript.

jadi bagaimana ia berfungsi?

Baiklah, secara ringkas: kami mengambil semua pautan di halaman, lanjutkan lanjutan fail yang dihubungkan ke, dan kemudian kami menambah ikon yang sesuai selepas pautan. Bagus.

Untuk menjadikannya semua berfungsi, terdapat tiga fail yang terlibat:

Halaman HTML yang mengandungi pautan, index.html

1. fail CSS yang mengandungi kelas ikon, ikonize.css


2. fail JavaScript yang menambah kelas dan ikon CSS ke pautan, ikonize.js


3. kaedah permulaan cepat

Sekarang, jika anda ingin menghindari Whys dan Wherefores, dan hanya mahu menambahkannya ke halaman anda, inilah versi pendek:

Tambahkan pautan ke fail JavaScript dan CSS di tajuk halaman (tukar rujukan fail yang sesuai dengan persediaan tapak anda).

1. 
   Letakkan folder ikon anda di laman web anda dan pastikan rujukan URL betul dalam fail Ikonize.css.
   

panggil fungsi JavaScript Ikonize dari tag skrip termasuk sebelum tag badan penutup, seperti SO:


3. 
   Lihat - Saya memberitahu anda bahawa ia adalah mudah untuk digunakan!

Demi kesederhanaan, saya telah memilih untuk memanggil fungsi dari dalam HTML selepas DOM telah dimuatkan. Terdapat cara lain untuk mencapai ini menggunakan JavaScript, tetapi mereka berada di luar skop artikel ini.

Penjelasan penuh

Jadikan diri anda selesa, kami akan menyelidiki kerja dalaman.

Konfigurasi

Dalam semangat menjaga perkara yang mudah, kebanyakan persediaan sudah dilakukan untuk anda. Anda hanya perlu menukar konfigurasi jika anda perlu mengubah ikon atau sambungan fail. Terdapat dua tempat untuk membuat perubahan ini: JavaScript (ikonize.js), dan fail CSS (ikonize.css).

Konfigurasi ikonize.js

Di bahagian atas fail, anda akan melihat semua pembolehubah konfigurasi: ClassPrefix, Classexternal, dan Classiconloc.

a[href$='.doc'] { <br>
  display: inline-block; <br>
  padding-left: 16px; <br>
  background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}

classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.

Pautan mana yang akan menerima ikon?

classExternal is the name of the CSS class you want to use to show a link to an external site.

Untuk menentukan jenis fail yang pergi ke, kami akan melihat pelanjutan fail. Jenis fail dibahagikan kepada dua kumpulan: mereka yang mempunyai ikon unik, seperti fail torrent, dan mereka yang akan berkongsi ikon yang sama, tetapi mempunyai sambungan fail yang berbeza, seperti fail flash (.fla dan .swf).

Pelanjutan fail kumpulan yang berkongsi ikon yang sama menjimatkan anda mempunyai beratus -ratus kelas dan ikon CSS. Untuk mencapai ini saya telah membuat dua tatasusunan.

Arahan pertama, IndividualClassArray, memegang sambungan fail semua pautan dengan ikon individu. Asas nama kelas CSS adalah sama dengan sambungan fail. Iaitu, fail teks dirujuk dengan 'TXT' dan nama kelas CSS adalah ClassPrefix (ditetapkan lebih awal) dan 'TXT' nama kelas CSS asas, membuat kelas CSS yang dipanggil 'IKON_TXT' dalam kes ini.

a[href$='.doc'] { <br>
  display: inline-block; <br>
  padding-left: 16px; <br>
  background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}

Arahan kedua, ClassArray, sebenarnya adalah pelbagai multidimensi, tetapi jangan biarkan itu meletakkan anda. Pada asasnya, ia adalah sekumpulan tatasusunan individu yang dikelompokkan mengikut jenis ikon yang ingin kami gunakan. Item pertama dalam array ini adalah IndividualClassArray (array ini mesti selalu menjadi array pertama). Arahan berikut adalah serupa dengan array sebelumnya dengan satu perbezaan penting: item pertama dalam setiap tatasusunan adalah nama kelas CSS yang akan digunakan, dan item berikut adalah sambungan fail yang memerlukan kelas itu. Dalam contoh berikut, sambungan fail .swf dan .fla akan dikaitkan dengan kelas 'flash' CSS.

classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.

nota: Sambungan fail tidak termasuk titik, iaitu, xls not .xls.

Untuk mudah alih maksimum, nama kelas CSS sebenar yang digunakan akan mempunyai awalan seperti 'Ikon_', yang kami konfigurasi sebelum ini - tetapi dalam array ini kita selalu tidak termasuk awalan. Jadi kelas CSS flash sentiasa dirujuk sebagai 'flash' daripada 'ikon_flash'.

Pautan luaran

Untuk mengetahui sama ada pautan adalah tapak luaran, kita perlu mengetahui nama tuan rumah halaman semasa.

untuk ini kita gunakan:

classExternal is the name of the CSS class you want to use to show a link to an external site.

Ini mengambil lokasi dokumen semasa dan mendapat nama domain menggunakan fungsi QualifyHref untuk memastikan kami mempunyai alamat yang berkelayakan dan fungsi parseUrl untuk mendapatkan nama hos. (Kedua -dua fungsi ini ditulis oleh Guru JavaScript penduduk kami, Brothercake, dan diliputi dalam catatan blognya). Kemudian, apabila kami menambah kelas untuk pautan luaran, kami akan menggunakan nama hos ini untuk menyelesaikan sama ada pautan itu adalah luaran ke laman web kami.

kod yang sebenarnya melakukan kerja

Sekarang kita perlu mendapatkan semua pautan dari halaman menggunakan document.getElementsByTagName ("a"), dan tentukan lanjutan fail pautan.

Kami melakukan ini dengan menggunakan fungsi ParseUrl dan QualifyHref sekali lagi.

Pertama, ambil nilai HREF elemen A:
linkHref = aelements [iv] .href;

Seterusnya, menghuraikan nilai untuk mendapatkan lebih banyak maklumat mengenai pautan:
ourl = parseUrl (kualifikasiHref (linkHref));

kemudian dapatkan lanjutan untuk pautan:
fileext = ourl.extension;

Kemudian, kita perlu gelung melalui pautan ini dan bersenam sama ada mereka memerlukan ikon. Di sinilah ia mula menjadi sedikit lebih rumit. Kita perlu gelung melalui ClassArray dan setiap tatasusunan yang mengandungi. Kami melakukan ini dengan menjalankan gelung dalam gelung. Ya, itu gelung, dalam gelung, dalam gelung! Kod berbulu ini kelihatan seperti ini:

a[href$='.doc'] { <br>
  display: inline-block; <br>
  padding-left: 16px; <br>
  background: transparent url(images/icon_doc.gif) center right no-repeat; <br>
}

Adakah pautan ini memerlukan ikon?

Untuk mengetahui sama ada kita perlu menambah ikon, kita akan membandingkan lanjutan fail pautan dengan setiap sambungan yang disenaraikan dalam array kami.

classPrefix is the prefix you want to give the individual CSS classes. Use this to prevent any conflicts with any existing CSS classes. The default is iKon_.

classExternal is the name of the CSS class you want to use to show a link to an external site.

pautan ke tapak luaran

Bekerja jika pautan ke tapak luaran hanyalah satu kes membandingkan nama hos URL yang kami tentukan sebelum ini dengan URL yang kami tetapkan di kawasan konfigurasi.

externalIconLoc is the location of the image to use for the external icon.

Jika benar, kami akan menambahkan elemen imej baru dalam sauh, tambahkan sumber dan ID, dan kemudian tambahkan atribut alt dan tajuk untuk imej. Kami menambah ikon tambahan dan bukan hanya memberikan kelas untuk menunjukkan dengan jelas bahawa pautan ini pergi ke laman web lain, serta menambah tajuk dan atribut alt ke ikon.

IndividualClassArray = Array('txt', 'xls', 'css', 'torrent');

Kelas CSS

mari kita kembali ke fail CSS sekarang.

Berikut adalah kelas CSS kami untuk menambah ikon ke fail .doc. Perhatikan nama kelas diawali dengan 'ikon_' dan kemudian lanjutan fail 'doc'. Kelas ini pada dasarnya meletakkan sedikit padding di bahagian atas dan bawah, dan di sebelah kanan pautan. Ia kemudian menambah imej latar belakang ikon ke dalam ruang itu.

classArray = Array(  <br>
IndividualClassArray,  <br>
Array('flash', 'swf', 'fla')  <br>
);

Untuk ikon pautan luaran kami, kami akan menggunakan struktur kelas yang sedikit berbeza. Kami menambah beberapa padding atas dan bawah untuk memastikan ikon kami tidak bersebelahan.

url = parseURL(qualifyHREF(document.location.href)).hostname;

Jika anda menukar pembolehubah ClassPrefix, jangan lupa untuk mengubah nama kelas ini untuk dipadankan.

Had

Pautan mesti mempunyai sambungan fail untuk mempunyai ikon yang diberikan kepada pautan (kecuali tapak luaran). Skrip juga tidak mengenali pautan navigasi berasaskan pertanyaan. Jika CSS dilumpuhkan, maka hanya ikon pautan luaran yang akan dipaparkan dan jika JavaScript dilumpuhkan, maka tidak ada perubahan yang dapat dilihat pada halaman.

Kesimpulan

Ikonize adalah cara yang cepat dan mudah untuk menambah ikon visual yang bermakna selepas pautan. Skrip berfungsi dalam IE5.5 dan boleh berfungsi bebas daripada pemilih atribut CSS3. Seperti yang anda harapkan, skrip merosot dengan baik dan mudah dikonfigurasikan. Saya harap anda dapati berguna!

soalan yang sering ditanya mengenai hiperpautan dalam javascript

Bagaimana saya boleh membuat hiperpautan menggunakan javascript?

Membuat hiperpautan menggunakan JavaScript melibatkan memanipulasi model objek dokumen (DOM). Anda boleh membuat elemen anchor baru, menetapkan atribut HREFnya, dan kemudian masukkannya ke badan dokumen. Berikut adalah contoh mudah:

var link = document.createElement ('a');
link.href = "https://www.example.com"; URL halaman yang ingin kami sambungkan. Kami kemudian menetapkan teks pautan itu, dan akhirnya memasukkan pautan ke badan dokumen. Atribut ini menentukan di mana untuk membuka dokumen yang dipautkan. Ia boleh ditetapkan kepada "_blank" untuk membuka dokumen dalam tetingkap atau tab baru, "_self" untuk membuka dokumen dalam bingkai yang sama seperti yang diklik (ini lalai), "_parent" untuk membuka dokumen dalam bingkai induk, atau "_top" untuk membuka dokumen dalam badan penuh tetingkap. Berikut adalah contoh:

var link = document.createelement ('a');
link.href = "https://www.example.com";

link.target = "_blank"; Atribut ditetapkan kepada "_blank", yang bermaksud pautan akan dibuka dalam tetingkap atau tab baru.

Bagaimana saya boleh menambah tajuk ke hiperpautan menggunakan JavaScript? Atribut ini memberikan maklumat tambahan mengenai pautan, seperti nama dokumen yang dipautkan, dan sering dipaparkan sebagai tooltip apabila tetikus bergerak ke atas pautan. Berikut adalah contoh:

var link = document.createelement ('a');
link.href = "https://www.example.com"; Tetapkan ke "Pergi ke Example.com", yang akan dipaparkan sebagai tooltip apabila tetikus bergerak ke atas pautan. Kaedah ini menghilangkan nod kanak -kanak tertentu dari elemen yang ditentukan. Berikut adalah contoh:

var link = document.getElementById ('MyLink'); link.parentNode.RemoveChild (link);

Bagaimana saya boleh menukar teks hiperpautan menggunakan JavaScript? Harta ini menetapkan atau mengembalikan kandungan teks nod yang ditentukan, dan semua keturunannya. Berikut adalah contoh:

var link = document.getElementById ('myLink'); link.textContent = "teks pautan baru"; gaya menggunakan harta 'gaya'. Harta ini digunakan untuk menambah, menukar, atau mengeluarkan gaya inline dari elemen. Berikut adalah contoh:

var link = document.getElementById ('myLink');
link.style.color = "merah";
link.style.fontsize = "20px"; Pendengar kepada hiperpautan menggunakan JavaScript?

Pendengar acara boleh ditambah ke hiperpautan menggunakan kaedah 'AddEventListener'. Kaedah ini melampirkan pengendali acara ke elemen yang ditentukan. Berikut adalah contoh:

var link = document.getElementById ('myLink');
link.addeventListener ('klik', function () {
alert ('anda mengklik pautan!'); Apabila pautan diklik, kotak amaran akan dipaparkan.

Bagaimana saya boleh menghalang hiperpautan daripada mengikuti URL menggunakan JavaScript? Kaedah ini membatalkan acara jika ia dapat dibatalkan, yang bermaksud bahawa tindakan lalai yang dimiliki oleh peristiwa itu tidak akan berlaku. Berikut adalah contoh:

var link = document.getElementById ('myLink');

link.addeventListener ('klik', fungsi (event) {

event.preventDefault (); Dengan IDnya, kemudian lampirkan pendengar acara klik kepadanya. Apabila pautan diklik, ia tidak akan mengikuti URL, dan kotak amaran akan dipaparkan. Atribut ini menyatakan bahawa sasaran akan dimuat turun apabila pengguna mengklik pada hyperlink. Berikut adalah contoh:

var link = document.createeelement ('a');
link.href = "https://www.example.com/myfile.pdf";
Link.download =" myfile.pdf "; Fail ";
document.body.appendchild (link);
Dalam kod ini, kita mula -mula membuat elemen anchor baru, kemudian tetapkan atribut HREF ke URL fail yang kita mahu muat turun. Kami kemudian menetapkan atribut muat turun ke nama fail, dan akhirnya masukkan pautan ke badan dokumen.

Bagaimana saya boleh membuat hiperpautan yang membuka klien e -mel menggunakan JavaScript? Protokol ini membuka klien e -mel pengguna dengan mesej baru, bersedia untuk dihantar. Berikut adalah contoh:

var link = document.createeelement ('a');
link.href = "mailto: example@example.com"; "Mailto: example@example.com". Kami kemudian menetapkan teks pautan, dan akhirnya masukkan pautan ke badan dokumen.

Atas ialah kandungan terperinci Hyperlink yang berguna dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!