Bagaimana cara mendeteksi jika JavaScript dinonaktifkan?

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.

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.

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.

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.

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

<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>

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!

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

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

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

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?

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.

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>

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.

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.

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.

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>

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.

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.

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

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!

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

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

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.

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

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

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.

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

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.

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()) . "'");

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.

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 .