html - Làm thế nào để phát hiện nếu JavaScript bị vô hiệu hóa?
Sáng nay có một bài đăng hỏi về việc có bao nhiêu người tắt JavaScript. Rồi tôi bắt đầu tự hỏi những kỹ thuật nào có thể được sử dụng để xác định xem người dùng có tắt nó hay không.
Có ai biết một vài cách ngắn/gọn để phát hiện nếu JavaScript bị tắt không? Ý định của tôi là đưa ra cảnh báo rằng trang web sẽ không hoạt động đúng nếu trình duyệt không bật JS.
Cuối cùng tôi muốn chuyển hướng họ đến nội dung có thể hoạt động khi không có JS, nhưng tôi cần sự phát hiện này như một giải pháp tạm thời để bắt đầu.
Câu trả lời #1
Tôi muốn thêm ý kiến của mình ở đây. Nó không hoàn toàn chắc chắn, nhưng tôi nghĩ nó đủ tốt.
Vấn đề, đối với tôi, với ví dụ được ưa thích về việc đưa ra một thông điệp kiểu "trang web này sẽ không hoạt động tốt nếu không có Javascript" là bạn sẽ phải đảm bảo rằng trang web của mình vẫn hoạt động ổn khi không có Javascript. Và khi bạn đã bắt đầu đi theo con đường đó, thì bạn sẽ nhận ra rằng trang web nên hoạt động hoàn hảo ngay cả khi tắt JS, và đó là một khối lượng công việc bổ sung rất lớn.
Vậy, điều bạn thực sự muốn là một 'chuyển hướng' đến một trang nói 'bật JS đi, ngốc ạ'. Nhưng, tất nhiên, bạn không thể thực hiện chuyển hướng meta một cách đáng tin cậy. Vậy, đây là gợi ý:
<noscript>
<style type="text/css">
.pagecontainer {display:none;}
</style>
<div class="noscriptmsg">
You don't have javascript enabled. Good luck with that.
</div>
</noscript>
...nơi mà tất cả nội dung trên trang của bạn được bao bọc bởi một thẻ div với lớp "pagecontainer". CSS bên trong thẻ noscript sau đó sẽ ẩn tất cả nội dung trang của bạn, và thay vào đó hiển thị bất kỳ thông điệp "không có JS" nào mà bạn muốn hiển thị. Thực ra, đây là cách Gmail dường như thực hiện... và nếu nó đủ tốt cho Google, thì nó cũng đủ tốt cho trang web nhỏ của tôi.
Câu trả lời #2
Tôi cho rằng bạn đang cố gắng quyết định có nên cung cấp nội dung nâng cao bằng JavaScript hay không. Những triển khai tốt nhất sẽ xuống cấp một cách mượt mà, để trang web vẫn hoạt động mà không cần JavaScript. Tôi cũng cho rằng bạn đang nói đến việc phát hiện phía máy chủ, thay vì sử dụng phần tử <noscript> vì một lý do không rõ ràng.
Không có cách tốt nào để thực hiện việc phát hiện JavaScript phía máy chủ. Như một phương án thay thế, có thể đặt một cookie bằng JavaScript, và sau đó kiểm tra cookie đó bằng kịch bản phía máy chủ khi người dùng xem trang trong các lần tiếp theo. Tuy nhiên, điều này sẽ không phù hợp để quyết định nội dung nào nên được cung cấp, vì nó sẽ không phân biệt được giữa những người truy cập không có cookie với những người truy cập mới hoặc những người truy cập không chấp nhận cookie được đặt bởi JavaScript.
Câu trả lời #3
Các khối noscript được thực thi khi JavaScript bị tắt, và thường được sử dụng để hiển thị nội dung thay thế cho nội dung mà bạn đã tạo bằng JavaScript, ví dụ.
<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>
Người dùng không có js sẽ nhận được liên kết next_page - bạn có thể thêm các tham số ở đây để bạn biết trên trang tiếp theo liệu họ đã đến thông qua liên kết JS/không JS, hoặc cố gắng thiết lập cookie qua JS, việc thiếu cookie này ngụ ý rằng JS bị tắt. Cả hai ví dụ này đều khá đơn giản và dễ bị thao túng, nhưng bạn đã hiểu ý tưởng.
Nếu bạn muốn có một ý tưởng hoàn toàn thống kê về việc bao nhiêu người dùng của bạn đã tắt javascript, bạn có thể làm điều gì đó như sau:
<noscript>
<img src="no_js.gif" alt="Javascript not enabled" />
</noscript>
sau đó kiểm tra nhật ký truy cập của bạn để xem hình ảnh này đã được truy cập bao nhiêu lần. Một giải pháp hơi thô sơ, nhưng nó sẽ cho bạn một ý tưởng tốt về tỷ lệ phần trăm cho cơ sở người dùng của bạn.
Cách tiếp cận trên (theo dõi hình ảnh) sẽ không hoạt động tốt với các trình duyệt chỉ hiển thị văn bản hoặc những trình duyệt hoàn toàn không hỗ trợ js, vì vậy nếu cơ sở người dùng của bạn chủ yếu nghiêng về phía đó, đây có thể không phải là cách tiếp cận tốt nhất.
Câu trả lời #4
Đây là điều đã hiệu quả với tôi: nó sẽ chuyển hướng khách truy cập nếu javascript bị tắt
<noscript><meta http-equiv="refresh" content="0; url=whatyouwant.html" /></noscript>
Nội dung được phép
Khi kịch bản bị vô hiệu hóa và khi nó là phần tử con của phần tử
<head>: theo bất kỳ thứ tự nào, có thể có không hoặc nhiều phần tử<link>, không hoặc nhiều phần tử<style>, và không hoặc nhiều phần tử<meta>. Khi kịch bản bị vô hiệu hóa và khi nó không phải là phần tử con của phần tử<head>: bất kỳ nội dung trong suốt nào, nhưng không được có phần tử<noscript>trong số các phần tử con của nó. Trong các trường hợp khác: nội dung dòng chảy hoặc nội dung định hình.
Tóm tắt kỹ thuật
Câu trả lời số 5
Tôi gợi ý bạn làm theo cách ngược lại bằng cách viết JavaScript không gây chú ý.
Hãy làm cho các tính năng của dự án của bạn hoạt động cho người dùng không bật JavaScript, và khi bạn đã xong, hãy triển khai các cải tiến giao diện người dùng bằng JavaScript của bạn.
https://vi.wikipedia.org/wiki/Unobtrusive_JavaScript
Câu trả lời số 6
Nếu trường hợp sử dụng của bạn là bạn có một biểu mẫu (ví dụ: một biểu mẫu đăng nhập) và script phía máy chủ của bạn cần biết người dùng có bật JavaScript hay không, bạn có thể làm như sau:
<form onsubmit="this.js_enabled.value=1;return true;">
<input type="hidden" name="js_enabled" value="0">
<input type="submit" value="go">
</form>
Điều này sẽ thay đổi giá trị của js_enabled thành 1 trước khi gửi biểu mẫu. Nếu kịch bản phía máy chủ của bạn nhận được 0, không có JS. Nếu nhận được 1, có JS!
Câu trả lời số 7
<noscript> thậm chí còn không cần thiết, chưa kể không được hỗ trợ trong XHTML.
Ví dụ hoạt động:
<!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>
Trong ví dụ này, nếu JavaScript được bật, thì bạn sẽ thấy trang web. Nếu không, bạn sẽ thấy thông báo "Vui lòng bật JavaScript". Cách tốt nhất để kiểm tra xem JavaScript có được bật hay không là đơn giản thử và sử dụng JavaScript! Nếu nó hoạt động, thì nó được bật, nếu không, thì nó không được bật...
Câu trả lời số 8
Sử dụng lớp .no-js trên phần body và tạo các kiểu không dùng javascript dựa trên lớp cha .no-js. Nếu javascript bị tắt, bạn sẽ nhận được tất cả các kiểu không dùng javascript, nếu hỗ trợ JS thì lớp .no-js sẽ bị thay thế, cung cấp cho bạn tất cả các kiểu như bình thường.
document.body.className = document.body.className.replace("no-js","js");
mẹo được sử dụng trong HTML5 boilerplate http://html5boilerplate.com/ thông qua modernizr nhưng bạn có thể sử dụng một dòng javascript để thay thế các lớp
thẻ noscript thì được nhưng tại sao lại có thêm thứ gì đó trong html của bạn khi nó có thể làm bằng css
Câu trả lời số 9
chỉ hơi khó một chút nhưng (hairbo đã cho tôi ý tưởng)
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>
vẫn sẽ hoạt động trong mọi trường hợp đúng không? ngay cả khi thẻ noscript không được hỗ trợ (chỉ yêu cầu một số css) có ai biết giải pháp không dùng css không?
Câu trả lời số 10
Bạn có thể sử dụng một đoạn JS đơn giản để thiết lập giá trị cho một trường ẩn. Khi gửi lại, bạn sẽ biết liệu JS có được bật hay không.
Hoặc bạn có thể thử mở một cửa sổ pop-up mà bạn đóng nhanh chóng (nhưng có thể nhìn thấy).
Ngoài ra, bạn có thẻ NOSCRIPT mà bạn có thể dùng để hiển thị văn bản cho các trình duyệt không bật JS.
Câu trả lời số 11
Bạn sẽ muốn xem qua thẻ 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>
Câu trả lời #12
Bởi vì tôi luôn muốn cung cấp cho trình duyệt điều gì đó đáng xem, tôi thường sử dụng mẹo này:
Trước hết, bất kỳ phần nào của trang mà cần JavaScript để chạy đúng cách (bao gồm các phần tử HTML thụ động được chỉnh sửa thông qua các lệnh gọi getElementById, v.v.) được thiết kế để có thể sử dụng ngay lập tức với giả định rằng KHÔNG có JavaScript nào sẵn có. (thiết kế như thể nó không tồn tại)
Bất kỳ phần tử nào yêu cầu JavaScript, tôi đặt bên trong một thẻ gì đó như:
<span name="jsOnly" style="display: none;"></span>
Sau đó, ở đầu tài liệu của tôi, tôi sử dụng .onload hoặc document.ready trong một vòng lặp của getElementsByName('jsOnly') để thiết lập .style.display=""; bật lại các phần tử phụ thuộc JS. Bằng cách đó, các trình duyệt không có JS sẽ không bao giờ phải nhìn thấy các phần phụ thuộc JS của trang, và nếu chúng có, nó sẽ xuất hiện ngay lập tức khi đã sẵn sàng.
Một khi bạn đã quen với phương pháp này, khá dễ dàng để kết hợp mã của bạn để xử lý cả hai tình huống, mặc dù tôi mới chỉ thử nghiệm với thẻ noscript và mong rằng nó sẽ mang lại một số lợi ích bổ sung.
Câu trả lời #13
Thẻ noscript hoạt động tốt, nhưng sẽ yêu cầu mỗi lần yêu cầu trang bổ sung vẫn phải tiếp tục phục vụ các tệp JS vô ích, vì về cơ bản noscript là một kiểm tra phía khách hàng.
Bạn có thể đặt một cookie bằng JS, nhưng như người khác đã chỉ ra, điều này có thể thất bại. Lý tưởng nhất, bạn sẽ muốn có khả năng phát hiện JS ở phía client, và mà không sử dụng cookie, thiết lập một phiên làm việc phía server cho người dùng đó cho thấy JS đã được bật.
Một khả năng là tự động thêm hình ảnh 1x1 bằng JavaScript trong đó thuộc tính src thực sự là một tập lệnh phía máy chủ. Tất cả những gì tập lệnh này làm là lưu vào phiên người dùng hiện tại mà JS được kích hoạt ($_SESSION['js_enabled']). Sau đó, bạn có thể xuất hình ảnh trống 1x1 trở lại trình duyệt. Tập lệnh sẽ không chạy cho những người dùng đã tắt JS và do đó $_SESSION['js_enabled'] sẽ không được đặt. Sau đó, đối với các trang tiếp theo được phục vụ cho người dùng này, bạn có thể quyết định có bao gồm tất cả các tệp JS bên ngoài của mình hay không, nhưng bạn sẽ luôn muốn bao gồm kiểm tra, vì một số người dùng của bạn có thể đang sử dụng tiện ích bổ sung NoScript Firefox hoặc tạm thời bị vô hiệu hóa JS vì một số lý do khác.
Bạn có lẽ sẽ muốn bao gồm kiểm tra này ở đâu đó gần cuối trang của bạn để yêu cầu HTTP bổ sung không làm chậm việc hiển thị trang của bạn.
Câu trả lời #14
Thêm điều này vào thẻ HEAD của mỗi trang.
<noscript>
<meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>
Vậy bạn có:
<head>
<noscript>
<meta http-equiv="refresh" runat="server" id="mtaJSCheck" content="0;logon.aspx" />
</noscript>
</head>
Cảm ơn Jay.
Câu trả lời số 15
Một giải pháp phổ biến là sử dụng thẻ meta kết hợp với noscript để làm mới trang và thông báo cho máy chủ khi JavaScript bị tắt, như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<noscript>
<meta http-equiv="refresh" content="0; /?javascript=false">
</noscript>
<meta charset="UTF-8"/>
<title></title>
</head>
</html>
Trong ví dụ trên, khi JavaScript bị vô hiệu hóa, trình duyệt sẽ chuyển hướng đến trang chủ của trang web trong 0 giây. Ngoài ra, nó cũng sẽ gửi tham số javascript=false đến máy chủ.
Một kịch bản phía máy chủ như node.js hoặc PHP sau đó có thể phân tích tham số và biết rằng JavaScript đã bị tắt. Sau đó, nó có thể gửi một phiên bản đặc biệt không có JavaScript của trang web tới khách hàng.
Câu trả lời số 16
Đây là giải pháp 'sạch' nhất mà tôi sẽ sử dụng:
<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>