Membandingkan pelbagai jenis popup JavaScript asli

JavaScript menyediakan pelbagai API pop timbul terbina dalam untuk memaparkan UI khas untuk interaksi pengguna. Yang paling biasa adalah:

 Alert ("Hello, World!");

UI bervariasi dari penyemak imbas ke penyemak imbas, tetapi biasanya anda akan melihat tetingkap kecil yang muncul ke pusat halaman dengan cara yang sangat menarik, yang mengandungi mesej yang anda lalui. Berikut adalah contoh Firefox dan Chrome:

Isu utama dalam popup JavaScript asli

Popup JavaScript menyekat .

Apabila pop timbul dibuka, seluruh halaman sebenarnya akan berhenti berjalan. Semasa pop timbul, anda tidak boleh berinteraksi dengan apa-apa di halaman-itulah yang betul-betul "tetingkap modal", tetapi ia masih merupakan faktor pengalaman pengguna yang perlu anda perhatikan. Adalah penting bahawa tiada kod utama javascript utama yang lain berjalan apabila pop timbul dibuka, yang mungkin (dan kemungkinan besar) tidak perlu menghalang laman web anda daripada melakukan apa yang perlu dilakukan.

Sembilan dari sepuluh kali, adalah yang terbaik untuk mengubah reka bentuk seni bina anda untuk mengelakkan menggunakan tingkah laku ini yang memaksa semua operasi berhenti. Penyemak imbas melaksanakan makluman JavaScript asli, juga menjadikannya mustahil bagi anda untuk mengawal reka bentuknya. Anda tidak dapat mengawal di mana mereka berada di halaman atau bagaimana mereka melihat di sana. Kecuali anda benar -benar memerlukan ciri -ciri penyekatan total mereka, hampir selalu terbaik untuk menggunakan antara muka pengguna tersuai yang boleh anda reka untuk menyesuaikan pengalaman untuk pengguna.

Mari kita lihat setiap tetingkap pop timbul asli.

window.alert()

 Window.alert ("Hello World");

// tunjukkan mesej contoh butang const = document.QuerySelectorAll ("butang");
Button.AdDeventListener ("klik", () => {
  Alert ("Teks butang:" Button.Innertext);
});

Tujuan: Memaparkan nilai mesej mudah atau pemboleh ubah debug.

Bagaimana Ia Berfungsi: Fungsi ini mengambil rentetan dan membentangkannya kepada pengguna dalam tetingkap pop timbul butang dengan label OK. Anda hanya boleh menukar mesej, bukan aspek lain, seperti teks pada butang.

Alternatif: Seperti makluman lain, jika anda perlu memaparkan mesej kepada pengguna, sebaiknya memaparkannya dengan cara yang sesuai dengan tindakan yang anda cuba lakukan.

Jika anda cuba debug nilai pembolehubah, pertimbangkan untuk menggunakan console.log("变量的值：", variable); dan melihatnya di konsol.

window.confirm()

 window.confirm ("Adakah anda pasti?");

// Tanya sampel biarkan jawapan = window.confirm ("Adakah anda suka kucing?");
jika (jawapan) {
  // Pengguna mengklik "ok"
} else {
  // Pengguna mengklik "Batal"
}

Tujuan: Digunakan untuk "Adakah anda pasti?" Taipkan mesej untuk melihat sama ada pengguna benar -benar mahu menyelesaikan tindakan yang telah mereka mulakan.

Bagaimana Ia Berfungsi: Anda boleh memberikan mesej tersuai, pop timbul akan menyediakan pilihan OK atau Batal, dan kemudian anda boleh menggunakan nilai itu untuk melihat kandungan yang dikembalikan.

Alternatif: Ini adalah cara yang sangat mengganggu untuk mendorong pengguna. Seperti yang dikatakan Aza Raskin:

... Mungkin anda tidak mahu menggunakan amaran sama sekali. "

Terdapat banyak cara untuk meminta pengguna mengesahkan kandungan tertentu. Mungkin UI yang jelas dengan butang sahkan yang menghubungkan dengan apa yang anda perlukan untuk dilakukan.

window.prompt()

 window.prompt ("Apa nama anda?");

biarkan jawapan = window.prompt ("Apa warna kegemaran anda?");
// Jawapan adalah apa yang pengguna masuk (jika ada)

Tujuan: Minta pengguna masuk. Anda menyediakan rentetan (mungkin diformat sebagai masalah) dan pengguna akan melihat tetingkap popup yang mengandungi rentetan, kotak input yang boleh dimasukkan, dan butang OK dan Batal.

Bagaimana Ia Berfungsi: Jika pengguna mengklik "OK", anda akan mendapat apa yang mereka masukkan dalam kotak input. Jika mereka tidak menaip apa -apa dan klik OK, anda akan mendapat rentetan kosong. Jika mereka memilih Batal, nilai pulangan akan menjadi batal.

Alternatif: Seperti semua makluman JavaScript asli yang lain, ini juga tidak membolehkan anda gaya atau meletakkan kotak amaran. Terbaik untuk digunakan<input> Elemen untuk mendapatkan maklumat pengguna. Dengan cara ini, anda boleh memberikan lebih banyak konteks dan reka bentuk yang bertujuan.

window.onbeforeunload()

 window.AddEventListener ("SebelumUnload", () => {
  // Standard memerlukan pembatalan operasi lalai.
  event.PreventDefault ();
  // Chrome Memerlukan tetapan ReturnValue (melalui MDN)
  event.returnvalue = '';
});

Tujuan: Mengeluarkan amaran sebelum pengguna meninggalkan halaman. Ini mungkin sangat menjengkelkan, tetapi ia tidak sering digunakan menjengkelkan. Ia digunakan untuk laman web di mana anda mungkin bekerja dan perlu menyimpannya secara eksplisit. Jika pengguna tidak menyelamatkan kerja mereka dan akan pergi, anda boleh menggunakan kaedah ini untuk memberi amaran kepada mereka. Jika mereka telah menyelamatkan kerja mereka, anda harus memadamkannya.

Bagaimana Ia Berfungsi: Jika anda telah melampirkan acara beforeunload ke tetingkap (dan melakukan tindakan lain yang ditunjukkan dalam coretan di atas), apabila pengguna cuba meninggalkan halaman, mereka akan melihat pop timbul bertanya jika mereka mahu "meninggalkan" atau "membatalkan". Meninggalkan laman web ini mungkin kerana pengguna mengklik pautan, tetapi ia juga mungkin hasil mengklik butang penyemak imbas atau belakang. Anda tidak boleh menyesuaikan mesej.

MDN memberi amaran bahawa sesetengah pelayar memerlukan interaksi dengan halaman untuk menjadikannya berfungsi:

Untuk memerangi popup yang tidak diingini, sesetengah pelayar tidak memaparkan petunjuk yang dibuat dalam pengendali acara beforeunload melainkan jika halaman telah berinteraksi dengannya. Juga, beberapa pelayar tidak menunjukkan sama sekali.

Alternatif: Tidak ada yang dapat dipikirkan. Jika ini adalah masalah dengan pengguna kehilangan kerja, anda perlu menggunakannya. Jika mereka memilih untuk tinggal, anda harus menjelaskan apa yang harus mereka lakukan untuk memastikan bahawa meninggalkan adalah selamat.

Kebolehcapaian

Makluman JavaScript asli digunakan untuk tidak popular di dunia aksesibiliti, tetapi pembaca skrin nampaknya semakin pintar dalam cara mereka dikendalikan. Menurut garis panduan kebolehaksesan Penn State:

Penggunaan kotak amaran sekali tidak digalakkan, tetapi mereka sebenarnya boleh diakses dalam pembaca skrin moden.

Apabila membuat tetingkap modal anda sendiri, pastikan anda mempertimbangkan kebolehcapaian, tetapi terdapat beberapa sumber yang hebat (seperti jawatan ini oleh IRE Aderinokun) yang boleh menunjukkan anda ke arah.

Alternatif biasa

Terdapat banyak alternatif untuk popup JavaScript asli, seperti menulis popup anda sendiri, menggunakan perpustakaan tetingkap modal, dan menggunakan perpustakaan amaran. Ingatlah bahawa tidak ada perkara yang kami diperkenalkan dapat menghalang pelaksanaan JavaScript dan interaksi pengguna, tetapi ada yang dapat melakukan ini dengan mengubati latar belakang dan memaksa pengguna untuk berinteraksi dengan tetingkap modal sebelum meneruskan.

Anda mungkin mahu melihat html asli<dialog></dialog> elemen. Chris baru -baru ini menjalankan kajian praktikal mengenainya. Ia menarik, tetapi terdapat beberapa isu kebolehaksesan utama. Saya tidak pasti jika ia lebih baik atau lebih teruk untuk membina popup anda sendiri, kerana pengendalian tingkap modal adalah elemen interaktif yang sangat penting. Sesetengah perpustakaan UI seperti bootstrap menyediakan tingkap modal, tetapi kebolehaksesan masih sebahagian besarnya di tangan anda. Anda mungkin mahu menyemak projek seperti A11Y-Dialog.

Meringkaskan

Menggunakan API terbina dalam platform web seolah-olah menjadi perkara yang betul untuk dilakukan-bukannya menghantar banyak kod JavaScript untuk menyalin fungsi, anda menggunakan fungsi yang kami sudah terbina dalam. Walau bagaimanapun, terdapat batasan yang serius, isu pengalaman pengguna dan isu -isu prestasi yang tidak kondusif untuk menggunakan popup JavaScript asli. Adalah penting untuk mengetahui apa yang mereka dan bagaimana menggunakannya, tetapi anda mungkin tidak memerlukannya banyak di laman web pengeluaran.

Atas ialah kandungan terperinci Membandingkan pelbagai jenis popup JavaScript asli. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!