Ada sebuah pos pagi ini yang menanyakan tentang berapa banyak orang yang menonaktifkan JavaScript. Kemudian saya mulai bertanya-tanya teknik apa yang mungkin digunakan untuk menentukan apakah pengguna telah menonaktifkannya.
Adakah yang tahu beberapa cara pendek / sederhana untuk mendeteksi jika JavaScript dinonaktifkan? Tujuan saya adalah untuk memberi peringatan bahwa situs tidak dapat berfungsi dengan baik tanpa browser mengaktifkan JS.
Akhirnya saya ingin mengarahkan mereka ke konten yang dapat bekerja tanpa JS, tapi saya perlu deteksi ini sebagai pengganti untuk memulai.
javascript
html
code-snippets
MikeJ
sumber
sumber
Jawaban:
Saya berasumsi bahwa Anda mencoba memutuskan apakah akan mengirimkan konten yang ditingkatkan JavaScript atau tidak. Implementasi terbaik menurun dengan bersih, sehingga situs tetap beroperasi tanpa JavaScript. Saya juga berasumsi bahwa maksud Anda deteksi sisi server , daripada menggunakan
<noscript>
elemen untuk alasan yang tidak dijelaskan.Tidak ada cara yang baik untuk melakukan deteksi JavaScript sisi server. Sebagai alternatif, dimungkinkan untuk mengatur cookie menggunakan JavaScript , dan kemudian menguji cookie tersebut menggunakan skrip sisi server pada tampilan halaman berikutnya. Namun ini tidak cocok untuk memutuskan konten yang akan dikirim karena tidak akan dapat membedakan pengunjung tanpa cookie dari pengunjung baru atau pengunjung yang memblokir cookie.
sumber
<style>
blok di dalamnya<noscript>
untuk menyembunyikan (tidak ada reflow di sana jika JS diaktifkan). Anehnya, ini bekerja di semua browser modern, dan bahkan di IE6Saya ingin menambahkan 0,02 saya di sini. Ini bukan 100% anti peluru, tapi saya pikir itu cukup baik.
Masalahnya, bagi saya, dengan contoh pilihan memasang semacam "situs ini tidak berfungsi dengan baik tanpa Javascript" adalah bahwa Anda perlu memastikan bahwa situs Anda berfungsi dengan baik tanpa Javascript. Dan begitu Anda sudah mulai menyusuri jalan itu, maka Anda mulai menyadari bahwa situs tersebut harus anti peluru dengan JS dimatikan, dan itu adalah sebagian besar pekerjaan tambahan.
Jadi, yang benar-benar Anda inginkan adalah "pengalihan" ke halaman yang mengatakan "nyalakan JS, konyol". Tapi, tentu saja, Anda tidak bisa diandalkan melakukan redirect meta. Jadi, inilah sarannya:
... di mana semua konten di situs Anda dibungkus dengan div kelas "pagecontainer". CSS di dalam tag noscript kemudian akan menyembunyikan semua konten halaman Anda, dan sebagai gantinya menampilkan pesan "no JS" apa pun yang ingin Anda tampilkan. Inilah sebenarnya yang tampaknya dilakukan oleh Gmail ... dan jika itu cukup baik untuk Google, itu cukup baik untuk situs kecil saya.
sumber
noscript
blok dieksekusi ketika JavaScript dinonaktifkan, dan biasanya digunakan untuk menampilkan konten alternatif yang telah Anda buat dalam JavaScript, misPengguna tanpa js akan mendapatkan
next_page
tautan - Anda dapat menambahkan parameter di sini sehingga Anda tahu di halaman berikutnya apakah mereka datang melalui tautan JS / non-JS, atau berupaya mengatur cookie melalui JS, ketidakhadiran yang menyiratkan JS dinonaktifkan. Kedua contoh ini cukup sepele dan terbuka untuk manipulasi, tetapi Anda mendapatkan idenya.Jika Anda ingin ide statistik murni tentang berapa banyak pengguna Anda yang menonaktifkan javascript, Anda dapat melakukan sesuatu seperti:
kemudian periksa log akses Anda untuk melihat berapa kali gambar ini dipukul. Sebuah solusi yang sedikit kasar, tetapi itu akan memberi Anda ide yang bagus berdasarkan persentase untuk basis pengguna Anda.
Pendekatan di atas (pelacakan gambar) tidak akan berfungsi dengan baik untuk browser hanya teks atau yang sama sekali tidak mendukung js, jadi jika basis pengguna Anda berayun terutama ke area itu, ini mungkin bukan pendekatan terbaik.
sumber
Inilah yang berhasil bagi saya: ini mengarahkan ulang pengunjung jika javascript dinonaktifkan
sumber
Jika use case Anda adalah bahwa Anda memiliki formulir (misalnya, formulir login) dan skrip sisi server Anda perlu tahu apakah pengguna telah mengaktifkan JavaScript, Anda dapat melakukan sesuatu seperti ini:
Ini akan mengubah nilai js_enabled menjadi 1 sebelum mengirimkan formulir. Jika skrip sisi server Anda mendapat 0, tidak ada JS. Jika mendapat 1, JS!
sumber
Saya sarankan Anda pergi sebaliknya dengan menulis JavaScript yang tidak mencolok.
Jadikan fitur proyek Anda berfungsi untuk pengguna yang menonaktifkan JavaScript, dan setelah selesai, terapkan peningkatan JavaScript UI Anda.
https://en.wikipedia.org/wiki/Unobtrusive_JavaScript
sumber
<noscript>
bahkan tidak perlu, dan belum lagi tidak didukung dalam XHTML .Contoh kerja :
Dalam contoh ini, jika JavaScript diaktifkan, maka Anda melihat situs tersebut. Jika tidak, maka Anda melihat pesan "Tolong aktifkan JavaScript". Cara terbaik untuk menguji apakah JavaScript diaktifkan, adalah dengan hanya mencoba dan menggunakan JavaScript! Jika berhasil, itu diaktifkan, jika tidak, maka itu tidak ...
sumber
Gunakan kelas .no-js di tubuh dan buat gaya non javascript berdasarkan kelas induk .no-js. Jika javascript dinonaktifkan, Anda akan mendapatkan semua gaya bukan javascript, jika ada dukungan JS, kelas .no-js akan diganti dengan memberi Anda semua gaya seperti biasa.
Trik yang digunakan dalam HTML5 boilerplate http://html5boilerplate.com/ melalui modernizr tetapi Anda dapat menggunakan satu baris javascript untuk mengganti kelas
tag noscript tidak apa-apa tapi mengapa ada hal-hal tambahan di html Anda ketika itu bisa dilakukan dengan css
sumber
.nojs
kelas! Ini adalah salah satu pendekatan yang paling mulus dan membuatnoscript
malu.hanya sedikit sulit tapi (hairbo memberiku ide)
CSS:
JS:
HTML:
akan bekerja dalam hal apa pun kan? bahkan jika tag noscript tidak didukung (hanya diperlukan beberapa css) ada yang tahu solusi non css?
sumber
Anda bisa menggunakan potongan JS sederhana untuk mengatur nilai bidang tersembunyi. Ketika diposting kembali Anda tahu apakah JS diaktifkan atau tidak.
Atau Anda dapat mencoba membuka jendela sembulan yang Anda tutup dengan cepat (tetapi itu mungkin terlihat).
Anda juga memiliki tag NOSCRIPT yang dapat Anda gunakan untuk menampilkan teks untuk browser dengan JS dinonaktifkan.
sumber
Anda akan ingin melihat tag noscript.
sumber
Tag noscript berfungsi dengan baik, tetapi akan meminta setiap permintaan halaman tambahan untuk terus melayani file JS yang tidak berguna, karena pada dasarnya noscript adalah pemeriksaan sisi klien.
Anda bisa mengatur cookie dengan JS, tetapi seperti yang ditunjukkan orang lain, ini bisa gagal. Idealnya, Anda ingin dapat mendeteksi sisi klien JS, dan tanpa menggunakan cookie, tetapkan sisi server sesi untuk pengguna yang menunjukkan bahwa JS diaktifkan.
Kemungkinannya adalah secara dinamis menambahkan gambar 1x1 menggunakan JavaScript di mana atribut src sebenarnya adalah skrip sisi server. Yang dilakukan skrip ini hanyalah menyimpan ke sesi pengguna saat ini yang mengaktifkan JS ($ _SESSION ['js_enabled']). Anda kemudian dapat menampilkan gambar kosong 1x1 kembali ke browser. Skrip tidak akan berjalan untuk pengguna yang memiliki JS dinonaktifkan, dan karenanya $ _SESSION ['js_enabled'] tidak akan ditetapkan. Kemudian untuk halaman selanjutnya yang disajikan kepada pengguna ini, Anda dapat memutuskan apakah akan menyertakan semua file JS eksternal Anda, tetapi Anda akan selalu ingin menyertakan cek, karena beberapa pengguna Anda mungkin menggunakan add-on NoScript Firefox atau memiliki JS dinonaktifkan sementara karena alasan lain.
Anda mungkin ingin memasukkan cek ini di suatu tempat dekat dengan akhir halaman Anda sehingga permintaan HTTP tambahan tidak memperlambat rendering halaman Anda.
sumber
Tambahkan ini ke tag KEPALA setiap halaman.
Jadi kamu punya:
Dengan terima kasih kepada Jay.
sumber
Karena saya selalu ingin memberikan sesuatu yang berharga untuk dilihat oleh browser, saya sering menggunakan trik ini:
Pertama, setiap bagian halaman yang membutuhkan JavaScript agar dapat berjalan dengan baik (termasuk elemen HTML pasif yang dapat dimodifikasi melalui panggilan getElementById, dll.) Dirancang agar dapat digunakan apa adanya dengan asumsi bahwa tidak ada javaScript yang tersedia. (dirancang seolah-olah tidak ada di sana)
Setiap elemen yang membutuhkan JavaScript, saya tempatkan di dalam tag, sesuatu seperti:
Kemudian pada awal dokumen saya, saya menggunakan
.onload
ataudocument.ready
dalam lingkarangetElementsByName('jsOnly')
untuk mengatur.style.display = "";
kembali elemen-elemen yang bergantung pada JS. Dengan begitu, browser non-JS tidak perlu melihat bagian-bagian yang bergantung pada JS dari situs, dan jika mereka memilikinya, segera muncul ketika sudah siap.Setelah Anda terbiasa dengan metode ini, cukup mudah untuk menghibridisasi kode Anda untuk menangani kedua situasi, meskipun saya baru saja bereksperimen dengan
noscript
tag dan berharap itu akan memiliki beberapa keuntungan tambahan.sumber
Ini adalah penggunaan id solusi "terbersih":
sumber
Solusi umum adalah dengan tag meta bersama dengan noscript untuk menyegarkan halaman dan memberi tahu server ketika JavaScript dinonaktifkan, seperti ini:
Dalam contoh di atas ketika JavaScript dinonaktifkan, browser akan mengarahkan ulang ke halaman utama situs web dalam 0 detik. Selain itu ia juga akan mengirim parameter javascript = false ke server.
Skrip sisi server seperti node.js atau PHP kemudian dapat menguraikan parameter dan mengetahui bahwa JavaScript dinonaktifkan. Kemudian dapat mengirim versi situs web non-JavaScript khusus ke klien.
sumber
Jika javascript dinonaktifkan, kode sisi klien Anda tidak akan berjalan, jadi saya berasumsi bahwa Anda ingin info tersebut tersedia di sisi server. Dalam hal ini, noscript kurang bermanfaat. Sebagai gantinya, saya akan memiliki input tersembunyi dan menggunakan javascript untuk mengisi nilai. Setelah permintaan atau postback Anda berikutnya, jika nilainya ada di sana, Anda tahu javascript dihidupkan.
Hati-hati terhadap hal-hal seperti noscript, di mana permintaan pertama mungkin menunjukkan javascript dinonaktifkan, tetapi permintaan selanjutnya mengaktifkannya.
sumber
Misalnya, Anda dapat menggunakan sesuatu seperti document.location = 'java_page.html' untuk mengarahkan ulang browser ke halaman baru yang sarat skrip. Kegagalan untuk mengarahkan ulang menyiratkan bahwa JavaScript tidak tersedia, dalam hal ini Anda dapat menggunakan utas CGI atau menyisipkan kode yang sesuai di antara tag. (CATATAN: NOSCRIPT hanya tersedia di Netscape Navigator 3.0 dan lebih tinggi.)
kredit http://www.intranetjournal.com/faqs/jsfaq/how12.html
sumber
Teknik yang saya gunakan di masa lalu adalah menggunakan JavaScript untuk menulis cookie sesi yang hanya bertindak sebagai bendera untuk mengatakan bahwa JavaScript diaktifkan. Kemudian kode sisi server mencari cookie ini dan jika tidak ditemukan mengambil tindakan yang sesuai. Tentu saja teknik ini bergantung pada cookie yang diaktifkan!
sumber
Saya pikir Anda bisa memasukkan tag gambar ke dalam tag noscript dan melihat statistik berapa kali situs Anda dan seberapa sering gambar ini dimuat.
sumber
Orang-orang telah memposting contoh yang merupakan opsi yang baik untuk deteksi, tetapi berdasarkan pada persyaratan Anda "beri peringatan bahwa situs tidak dapat berfungsi dengan baik tanpa browser mengaktifkan JS". Anda pada dasarnya menambahkan elemen yang entah bagaimana muncul di halaman, misalnya 'pop-up' di Stack Overflow ketika Anda mendapatkan lencana, dengan pesan yang sesuai, lalu hapus ini dengan beberapa Javascript yang berjalan segera setelah halaman dimuat ( dan maksud saya DOM, bukan seluruh halaman).
sumber
Mendeteksi apa? JavaScript? Itu tidak mungkin. Jika Anda hanya menginginkannya untuk tujuan logging, Anda dapat menggunakan semacam skema pelacakan, di mana setiap halaman memiliki JavaScript yang akan membuat permintaan untuk sumber daya khusus (mungkin sangat kecil
gif
atau serupa). Dengan begitu Anda bisa mengambil perbedaan antara permintaan halaman unik dan permintaan untuk file pelacakan Anda.sumber
Mengapa Anda tidak meletakkan event handler onClick () yang dibajak yang hanya akan aktif ketika JS diaktifkan, dan menggunakan ini untuk menambahkan parameter (js = true) ke URL yang diklik / dipilih (Anda juga bisa mendeteksi daftar drop-down) dan ubah nilai- dari menambahkan bidang formulir tersembunyi). Jadi sekarang ketika server melihat parameter ini (js = true) ia tahu bahwa JS diaktifkan dan kemudian lakukan sisi server logika mewah Anda.
Sisi buruknya adalah saat pertama kali seorang pengguna datang ke situs Anda, bookmark, URL, mesin pencari yang menghasilkan URL - Anda perlu mendeteksi bahwa ini adalah pengguna baru jadi jangan mencari NVP yang ditambahkan ke URL, dan server harus menunggu klik berikutnya untuk menentukan pengguna apakah JS diaktifkan / dinonaktifkan. Juga, kelemahan lain adalah bahwa URL akan berakhir pada URL browser dan jika pengguna ini kemudian bookmark URL ini akan memiliki js = true NVP, bahkan jika pengguna tidak memiliki JS diaktifkan, meskipun pada klik berikutnya server akan bijak mengetahui apakah pengguna masih mengaktifkan JS atau tidak. Huh .. ini menyenangkan ...
sumber
Untuk memaksa pengguna mengaktifkan JavaScripts, saya menetapkan atribut 'href' dari setiap tautan ke dokumen yang sama, yang memberi tahu pengguna untuk mengaktifkan JavaScripts atau mengunduh Firefox (jika mereka tidak tahu cara mengaktifkan JavaScripts). Saya menyimpan url tautan yang sebenarnya ke atribut 'nama' tautan dan menetapkan acara onclick global yang membaca atribut 'nama' dan mengalihkan halaman di sana.
Ini berfungsi baik untuk basis pengguna saya, meskipun agak fasis;).
sumber
Anda tidak mendeteksi apakah pengguna telah menonaktifkan javascript (sisi server atau klien). Sebagai gantinya, Anda menganggap bahwa javascript dinonaktifkan dan membangun halaman web Anda dengan javascript dinonaktifkan. Ini meniadakan kebutuhan untuk
noscript
, yang sebaiknya Anda hindari menggunakan karena itu tidak berfungsi dengan benar dan tidak perlu.Misalnya, cukup buat situs Anda untuk mengatakan
<div id="nojs">This website doesn't work without JS</div>
Kemudian, skrip Anda hanya akan melakukan
document.getElementById('nojs').style.display = 'none';
dan menjalankan bisnis JS normal.sumber
Periksa cookie menggunakan solusi sisi server murni yang saya perkenalkan di sini kemudian periksa javascript dengan menjatuhkan cookie menggunakan Jquery.Cookie dan kemudian periksa cookie dengan cara ini u periksa cookie dan javascript
sumber
Dalam beberapa kasus, melakukannya mundur mungkin cukup. Tambahkan kelas menggunakan javascript:
Ini dapat membuat masalah pemeliharaan pada hal-hal yang kompleks, tetapi ini adalah perbaikan sederhana untuk beberapa hal. Alih-alih mencoba mendeteksi ketika tidak dimuat, cukup gaya menurut kapan itu dimuat.
sumber
Saya ingin menambahkan solusi saya untuk mendapatkan statistik yang dapat diandalkan tentang berapa banyak pengguna nyata mengunjungi situs saya dengan javascript dinonaktifkan atas total pengguna. Cek dilakukan satu kali saja per sesi dengan manfaat berikut:
Kode saya menggunakan PHP, mysql dan jquery dengan ajax tetapi dapat diadaptasi ke bahasa lain:
Buat tabel di DB Anda seperti ini:
Tambahkan ini ke setiap halaman setelah menggunakan session_start () atau setara (diperlukan jquery):
Buat halaman JSOK.php seperti ini:
sumber
Saya sudah menemukan pendekatan lain menggunakan css dan javascript itu sendiri.
Ini hanya untuk mulai bermain-main dengan kelas dan id.
Cuplikan CSS:
1. Buat aturan ID css, dan beri nama #jsDis.
2. Gunakan properti "konten" untuk menghasilkan teks setelah elemen BODY. (Anda dapat menata ini sesuai keinginan).
3 Buat aturan ID css ke-2 dan beri nama #jsEn, dan sesuaikan gaya. (Demi kesederhanaan, saya memberi #jsEn saya aturan warna latar belakang yang berbeda.
Cuplikan JavaScript:
1. Buat fungsi.
2. Ambil ID BODY dengan getElementById dan tetapkan ke variabel.
3. Menggunakan fungsi JS 'setAttribute', ubah nilai atribut ID elemen BODY.
Bagian HTML.
1. Beri nama atribut elemen BODY dengan ID #jsDis.
2. Tambahkan acara onLoad dengan nama fungsi. (jsOn ()).
Karena tag BODY telah diberi ID #jsDis:
- Jika Javascript diaktifkan, itu akan mengubah sendiri atribut dari tag BODY.
- Jika Javascript dinonaktifkan, itu akan menampilkan teks aturan css 'content:'.
Anda dapat bermain-main dengan wadah #wrapper, atau dengan DIV apa pun yang menggunakan JS.
Semoga ini bisa membantu untuk mendapatkan ide.
sumber
Menambahkan refresh dalam meta di dalam noscript bukanlah ide yang baik.
Karena tag noscript tidak sesuai XHTML
Nilai atribut "Refresh" tidak standar, dan tidak boleh digunakan. "Refresh" menghilangkan kendali halaman dari pengguna. Menggunakan "Refresh" akan menyebabkan kegagalan dalam Pedoman Aksesibilitas Konten Web W3C --- Referensi http://www.w3schools.com/TAGS/att_meta_http_equiv.asp .
sumber