Bagaimana cara mendeteksi jika JavaScript dinonaktifkan?

659

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.

MikeJ
sumber
Apa yang ingin Anda lakukan dengan informasi ini? Itu bisa mengubah jawaban yang Anda dapatkan - mis. Peningkatan progresif umumnya lebih disukai daripada mencoba mendeteksi JavaScript dinonaktifkan dan mengambil tindakan spesifik berdasarkan itu.
Jonny Buchanan
peningkatan progresif adalah apa yang saya cari. Saya ingin dapat mengarahkan mereka ke konten alternatif yang akan berfungsi dengan baik dalam ketiadaan JS memungkinkan atau browser yang mampu.
MikeJ
1
@expiredninja Posting ini dari Nicholas Zakas mengatakan sekitar 2%, meskipun sudah lebih dari setahun.
sdleihssirhc
Cara termudah adalah dengan menggunakan noscript untuk menampilkan situs non-javascript, dan menggunakan javascript untuk menampilkan elemen-elemen yang bergantung pada javascript dengan memodifikasi tampilan gaya.
Myforwik

Jawaban:

286

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.

ashleedawg
sumber
129
<noscript> ADALAH cara yang paling semantik untuk menentukan konten non-javascript - dan kemudian mendeteksi apakah javascript dinonaktifkan, deteksi jika diaktifkan. Jadi tunjukkan pesan "Anda perlu javascript untuk menggunakan situs saya dengan benar" secara default, tetapi sembunyikan segera dengan fungsi javascript di Load.
matt lohkamp
58
@matt lohkamp: Atau bahkan menyembunyikan pesan secara default, dan letakkan <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 IE6
Piskvor meninggalkan gedung
7
@matt - Saya melakukan ini untuk sementara waktu, tetapi pesannya tetap sementara pada koneksi yang lambat membuat pengguna bingung. Saya di sini mencari solusi yang berbeda. @Piskvor - tag <noscript> di header tidak akan divalidasi, dan tag <style> di badan tidak akan divalidasi.
Ben
20
... kecuali mengapa Anda khawatir dengan validasi? Apakah Anda memvalidasi hanya untuk memvalidasi? Mungkin tidak "benar" tetapi jika berhasil dan berhasil "dengan sedikit kotoran di bawah tenda" apa masalahnya? Jangan khawatir, saya tidak akan menilai ;-)
keif
4
Tetap valid jika Anda hanya menggunakan atribut style ke elemen yang diberikan dalam tag <noscript> (seperti <noscript> <div style = "color: red;"> blahblah </div> </noscript> atau sg. Serupa) . TETAPI juga tetap valid jika Anda meletakkan <style> BLOCK secara normal di header yang mendefinisikan gaya beberapa elemen .noscript (atau yang sejenis), dan di dalam tubuh, di dalam tag <noscript>, Anda hanya memberikan elemen yang diberikan kelas .noscript yang didefinisikan sebelumnya, seperti ini: <noscript> <div class = "noscript"> blahblah </div> </noscript>
Sk8erPeter
360

Saya 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:

<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
    You don't have javascript enabled.  Good luck with that.
    </div>
</noscript>

... 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.

hairbo
sumber
12
@ pernahkah dia mencoba memvalidasi google.com? validasi hanya menentukan seberapa dekat dokumen mengikuti lembar spesifikasi, itu sama sekali tidak mempengaruhi kegunaan halaman.
JKirchartz
71
@JonasGeiregat Apa yang salah dengan memaksa pengguna untuk meminta Javascript jika aplikasi web Anda dibuat - dan mengharuskan - Javascript berfungsi? Saya mendengar komentar ini terlalu sering, namun itu hanya berlaku untuk situs yang paling sederhana. Coba Facebook tanpa JS dan lihat apa yang terjadi. Jika aplikasi Anda dibuat untuk Javascript, lalu apa salahnya dengan mengharuskan 99% pengguna yang telah mengaktifkan?
Lee Benson
19
@Lee menyentuh itu pada kuku, Anda hanya dapat melakukan begitu banyak untuk pengguna sebelum Anda menarik garis pada apa yang akan Anda dukung. Kami berharap semua pengguna memiliki perangkat yang mendukung internet, haruskah saya juga menerapkan versi kertas dari situs saya bagi mereka yang menolak untuk mengakses internet?
Kolors
14
@ Warna, saya membuat komentar itu kembali pada Maret 2012, dan saya berpendapat bahwa itu benar ganda hari ini. Sejak itu, kami memiliki Meteor, Angular.Js, Famo.us, dan banyak sekali perpustakaan menakjubkan yang semuanya memerlukan Javascript untuk memulai . Saya bertanya-tanya apa yang sebenarnya ingin dicapai oleh pengguna yang memilih untuk menonaktifkan JS ... jelas, mereka tidak menjelajahi web yang sama dengan kita semua, dan tidak ada alasan perusahaan harus mengurangi situs web mereka untuk yang terkecil. sub-set pengguna yang keras kepala ...
Lee Benson
6
Ya, dan saya bertanya-tanya mengapa saya tidak bisa meningkatkan jawaban Anda, karena saya lupa mengaktifkan JS saya :-)) Saya suka dan terapkan solusi Anda! Terima kasih!
Garavani
198

noscript blok dieksekusi ketika JavaScript dinonaktifkan, dan biasanya digunakan untuk menampilkan konten alternatif yang telah Anda buat dalam JavaScript, mis

<script type="javascript">
    ... construction of ajaxy-link,  setting of "js-enabled" cookie flag, etc..
</script>
<noscript>
    <a href="next_page.php?nojs=1">Next Page</a>
</noscript>

Pengguna tanpa js akan mendapatkan next_pagetautan - 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:

<noscript>
    <img src="no_js.gif" alt="Javascript not enabled" />
</noscript>

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.

ConroyP
sumber
7
Ini tidak terlalu efektif. Misalnya, itu tidak akan menghitung siapa pun dengan browser hanya teks, yang biasanya tidak memiliki dukungan JavaScript. Paling tidak, Anda harus menonaktifkan caching untuk gambar itu.
Jim
3
Akankah browser yang tidak mendukung JS sama sekali tidak mengabaikan tag noscript dan menampilkan gambar?
LKM
1
@ LKM: Tergantung pada bagaimana mereka ditulis, kemungkinan besar mereka akan melakukannya, jadi Anda akan membuatnya menjadi 1x1px dot. Opsi itu terutama untuk melacak pola penggunaan sisi-server, jadi masih akan baik-baik saja, karena dipicu oleh pengguna tanpa kemampuan javascript.
ConroyP
Perhatikan bahwa saat ini ada bug dengan IE8 dan tag noscript jika Anda mendesainnya ... lihat positioniseverything.net/explorer.html
alex
2
Anda juga dapat menyajikan gambar itu sebagai skrip sisi server, mengatur tipe mime, dan menggunakannya untuk mencatat beberapa informasi tentang pengguna atau menjatuhkan cookie ... px.sklar.com/code.html/id=256
JKirchartz
46

Inilah yang berhasil bagi saya: ini mengarahkan ulang pengunjung jika javascript dinonaktifkan

<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>
Ernie13
sumber
6
Ini tidak valid. elemen noscript tidak boleh mengandung elemen meta. Saya tidak akan percaya ini bekerja dengan andal di semua browser (termasuk browser masa depan yang saat ini tidak dapat Anda uji), karena mereka dapat melakukan pemulihan kesalahan dengan cara yang berbeda.
Quentin
15
Ini mungkin tidak valid, tetapi lihat kode Facebook, ia menggunakan solusi yang sama di bagian <head> - yang tidak berarti itu solusi yang sangat baik, karena kode Facebook jauh dari kode yang valid, TAPI itu bisa berarti itu adalah berfungsi di banyak browser pengguna, yang dapat menjadi aspek penting. Tetapi memang benar bahwa itu tidak benar-benar disarankan. Ini adalah kode mereka: <noscript> <meta http-equiv = refresh content = "0; URL = / tentang / messages /? _ Fb_noscript = 1" /> </noscript>
Sk8erPeter
IE9 (setidaknya) memiliki pengaturan "izinkan META REFRESH". Saya tampaknya tidak banyak mematikannya, tetapi mungkin yang tidak suka javascript lakukan, tetapi jika Anda ingin 100%, bukan ini.
jenson-button-event
Ini valid dalam HTML5.
Naszta
1
Ini menghancurkan tautan ketika mencoba berbagi di Linkedin, kami menemukan jalan yang sulit ... ini bukan ide yang baik. Karena linkedin mengikuti meta refresh, mengabaikan tag Og, dll.
SomeDudeSomewhere
44

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:

<form onsubmit="this.js_enabled.value=1;return true;">
    <input type="hidden" name="js_enabled" value="0">
    <input type="submit" value="go">
</form>

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!

Andrew Hedges
sumber
44

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

roosteronacid
sumber
146
Hidup ini terlalu singkat. Ini 2012- Aktifkan javascript atau pulang
Yarin
25
"Hidup ini terlalu singkat. Ini tahun 2012 - Aktifkan javascript atau pulang!" adalah pesan kecil yang sempurna untuk ditampilkan jika tidak ada JS. masuk hanya untuk memberi tahu Anda bahwa @Yarin
5
Saya juga baru saja masuk untuk mengatakan itu LUAR BIASA! @Yarin. Saya membuat situs kecil yang umumnya tidak umum (pertimbangkan seperti intranet tetapi untuk teman-teman yang bersama-sama mengerjakan proyek). Saya menjadikannya SPA dan tidak mau repot untuk mundur. JavaScript yang tidak mencolok akan hampir menggandakan beban kerja yang saya masukkan ke dalam konsep SPA. Dengan pustaka javascript modern seperti Knockout, Jquery, antara lain, kita hanya harus menerima bahwa tidak setiap situs dapat dengan mudah dibuat "tidak mencolok." Javascript adalah masa depan web.
lassombra
5
@Yarin, saya membuat aplikasi PHP / JS sebagai mata pencaharian saya tidak pernah mundur ... jika itu tidak berhasil untuk seseorang yang mereka hubungi saya dan saya katakan pada mereka untuk berhenti hidup di masa lalu dan mengaktifkan JS.
Sam
2
@ n611x007 - Hal-hal yang tidak etis disembunyikan di semua kode, di setiap perangkat, baik di sisi server maupun klien. Ini bukan kode kesalahan, itu kesalahan manusia. Saya menemukan kampanye melawan JS ironis karena Anda masih menggunakan ISP pihak ke-3 untuk terhubung ke internet, masih menggunakan komputer dengan perangkat keras / firmware pihak ke-3, masih menggunakan jaringan sel tidak aman yang dapat diakses oleh suntikan pihak ke-3, masih memiliki ponsel yang menggunakan OS tanpa paket pihak ke-3, masih menggunakan TV layar datar yang menggunakan layanan pembaruan terbuka lebar dari pihak ke-3, dll. Anda selalu menjadi korban saluran MITM-ish terlepas dari apakah Anda mematikan JS di browser Anda.
dhaupin
35

<noscript>bahkan tidak perlu, dan belum lagi tidak didukung dalam XHTML .

Contoh kerja :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
    <title>My website</title>
    <style>
      #site {
          display: none;
      }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js "></script>
    <script>
      $(document).ready(function() {
          $("#noJS").hide();
          $("#site").show();
      });
    </script>
</head>
<body>
    <div id="noJS">Please enable JavaScript...</div>
    <div id="site">JavaScript dependent content here...</div>
</body>
</html>

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 ...

de Raad
sumber
1
Ha, XHTML. Itu adalah hari-hari ... Banyak hal telah berubah: developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript
Stephan Weinhold
mengapa menggunakan jquery ...
Luis Villavicencio
@StephanWeinhold, JSF menggunakan XHTML.
Arash
34

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.

 document.body.className = document.body.className.replace("no-js","js");

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

Grundizer
sumber
5
Tidak percaya itu butuh waktu lama sebelum seseorang menyebutkan .nojskelas! Ini adalah salah satu pendekatan yang paling mulus dan membuat noscriptmalu.
Moses
15

hanya sedikit sulit tapi (hairbo memberiku ide)

CSS:

.pagecontainer {
  display: none;
}

JS:

function load() {
  document.getElementById('noscriptmsg').style.display = "none";
  document.getElementById('load').style.display = "block";
  /* rest of js*/
}

HTML:

<body onload="load();">

  <div class="pagecontainer" id="load">
    Page loading....
  </div>
  <div id="noscriptmsg">
    You don't have javascript enabled. Good luck with that.
  </div>

</body>

akan bekerja dalam hal apa pun kan? bahkan jika tag noscript tidak didukung (hanya diperlukan beberapa css) ada yang tahu solusi non css?

borrel
sumber
13

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.

rslite
sumber
Ini bukan jawaban yang bagus. Solusi pertama membutuhkan pemuatan ulang halaman dan pengiriman formulir. Solusi kedua membuka popup (ack!) Dan menutupnya "dengan cepat" - dari sisi klien? -1
Ben
Terkadang Anda perlu mengetahui sisi server apakah suatu situs memiliki JS diaktifkan atau tidak, jadi saya tidak melihat bagaimana Anda dapat melakukannya selain memposting sesuatu kembali. Setuju bahwa popup jelek dan jelek. Saya tidak begitu yakin tentang hal ini tetapi harus dimungkinkan untuk membuka popup di luar area layar yang terlihat sehingga pengguna tidak terganggu dengan hal ini. Tidak elegan tetapi berfungsi dan tidak ada memuat ulang halaman.
rslite
Spambot juga mengeposkan ke bidang tersembunyi.
Janis Veinbergs
13

Anda akan ingin melihat tag noscript.

<script type="text/javascript">
...some javascript script to insert data...
</script>
<noscript>
   <p>Access the <a href="http://someplace.com/data">data.</a></p>
</noscript>
anon
sumber
12

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.

David Wees
sumber
12

Tambahkan ini ke tag KEPALA setiap halaman.

<noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>

Jadi kamu punya:

<head>
    <noscript>
        <meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
    </noscript>
</head>

Dengan terima kasih kepada Jay.

the_seeker_who
sumber
12

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:

<span name="jsOnly" style="display: none;"></span>

Kemudian pada awal dokumen saya, saya menggunakan .onloadatau document.readydalam lingkaran getElementsByName('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 noscripttag dan berharap itu akan memiliki beberapa keuntungan tambahan.

Brian
sumber
10

Ini adalah penggunaan id solusi "terbersih":

<noscript>
    <style>
        body *{ /*hides all elements inside the body*/
            display: none;
        }
        h1{ /* even if this h1 is inside head tags it will be first hidden, so we have to display it again after all body elements are hidden*/
            display: block;
        }
    </style>
    <h1>JavaScript is not enabled, please check your browser settings.</h1>
</noscript>
Alpha2k
sumber
9

Solusi umum adalah dengan tag meta bersama dengan noscript untuk menyegarkan halaman dan memberi tahu server ketika JavaScript dinonaktifkan, seperti ini:

<!DOCTYPE html>
<html lang="en">
    <head>
        <noscript>
            <meta http-equiv="refresh" content="0; /?javascript=false">
        </noscript>
        <meta charset="UTF-8"/>
        <title></title>
    </head>
</html>

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.

Umesh Patil
sumber
8

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.

Joel Coehoorn
sumber
5

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

Brad8118
sumber
4

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!

John Topley
sumber
4

Saya pikir Anda bisa memasukkan tag gambar ke dalam tag noscript dan melihat statistik berapa kali situs Anda dan seberapa sering gambar ini dimuat.

TuanVolley
sumber
4

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).

roryf
sumber
3

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 gifatau serupa). Dengan begitu Anda bisa mengambil perbedaan antara permintaan halaman unik dan permintaan untuk file pelacakan Anda.

Hank Gay
sumber
3

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 ...

FirstSOURCE
sumber
3

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;).

Jan Sahin
sumber
dan sedikit menyebalkan jika pengguna mengaktifkan JS dan mengklik tautannya sebelum javascript progresif Anda masuk ...
Simon_Weaver
1
Tentu, tetapi belum ada masalah yang dilaporkan.
Jan Sahin
3

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.

Pil Ledakan
sumber
ini adalah pendekatan tanpa batas yang bagus tag <noscript> jauh lebih sulit untuk dipertahankan pada halaman yang berbeda dengan pendekatan ini Anda dapat mempertahankan gaya penulisan noscript Anda melalui file css Anda.
zadubz
3

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

pouya
sumber
3

Dalam beberapa kasus, melakukannya mundur mungkin cukup. Tambahkan kelas menggunakan javascript:

// Jquery
$('body').addClass('js-enabled');

/* CSS */
.menu-mobile {display:none;}
body.js-enabled .menu-mobile {display:block;}

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.

Jennifer Michelle
sumber
3

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:

  • Pengguna yang mengunjungi 100 halaman atau hanya 1 masing-masing dihitung 1. Ini memungkinkan untuk fokus pada pengguna tunggal, bukan halaman.
  • Tidak memecah aliran halaman, struktur atau semantik dengan cara apa pun
  • Dapat mencatat agen pengguna. Ini memungkinkan untuk mengecualikan bot dari statistik, seperti google bot dan bing bot yang biasanya JS dinonaktifkan! Bisa juga mencatat IP, waktu dll ...
  • Hanya satu cek per sesi (kelebihan beban minimal)

Kode saya menggunakan PHP, mysql dan jquery dengan ajax tetapi dapat diadaptasi ke bahasa lain:

Buat tabel di DB Anda seperti ini:

CREATE TABLE IF NOT EXISTS `log_JS` (
  `logJS_id` int(11) NOT NULL AUTO_INCREMENT,
  `data_ins` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `session_id` varchar(50) NOT NULL,
  `JS_ON` tinyint(1) NOT NULL DEFAULT '0',
  `agent` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`logJS_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

Tambahkan ini ke setiap halaman setelah menggunakan session_start () atau setara (diperlukan jquery):

<?  if (!isset($_SESSION["JSTest"]))
    { 
        mysql_query("INSERT INTO log_JS (session_id, agent) VALUES ('" . mysql_real_escape_string(session_id()) . "', '" . mysql_real_escape_string($_SERVER['HTTP_USER_AGENT']). "')"); 
        $_SESSION["JSTest"] = 1; // One time per session
        ?>
        <script type="text/javascript">
            $(document).ready(function() { $.get('JSOK.php'); });
        </script>
        <?
    }
?>

Buat halaman JSOK.php seperti ini:

<?
include_once("[DB connection file].php");   
mysql_query("UPDATE log_JS SET JS_ON = 1 WHERE session_id = '" . mysql_real_escape_string(session_id()) . "'");
terputus
sumber
3

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.

<style>
#jsDis:after {
    content:"Javascript is Disable. Please turn it ON!";
    font:bold 11px Verdana;
    color:#FF0000;
}

#jsEn {
    background-color:#dedede;
}

#jsEn:after {
    content:"Javascript is Enable. Well Done!";
    font:bold 11px Verdana;
    color:#333333;
}
</style>

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.

<script>
function jsOn() {
    var chgID = document.getElementById('jsDis');
    chgID.setAttribute('id', 'jsEn');
}
</script>

Bagian HTML.
1. Beri nama atribut elemen BODY dengan ID #jsDis.
2. Tambahkan acara onLoad dengan nama fungsi. (jsOn ()).

<body id="jsDis" onLoad="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.

Chris Pesoa
sumber
2

Menambahkan refresh dalam meta di dalam noscript bukanlah ide yang baik.

  1. Karena tag noscript tidak sesuai XHTML

  2. 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 .

Gaurav Talwar
sumber
Tidak ada yang mengatakan apa pun tentang XHTML. <noscript> adalah HTML 4.01 yang sangat valid.
Tom
2
noscript juga sangat valid di XHTML 1.0 dan XHTML 1.1. Itu tidak bisa mengandung elemen meta, dan itu harus dihindari demi peningkatan progresif, tetapi itu adalah bagian dari bahasa.
Quentin