Có thẻ HTML nào đối diện với <noscript> không? Tức là, chỉ hiển thị một số nội dung nếu JavaScript được bật? Ví dụ:đối diện của <noscript>
<ifscript>
<h1> Click on the big fancy Javascript widget below</h1>
<ifscript>
Tất nhiên <ifscript> không thực sự tồn tại. Tôi biết tôi có thể đạt được kết quả tương tự bằng cách thêm <h1> vào DOM bằng JavaScript, nhưng nếu tôi muốn thực hiện điều này bằng HTML (X) nếu có thể.
Cảm ơn, Donal
Có <script> là dành cho. Ban đầu chỉ cần ẩn phần cụ thể bằng cách sử dụng CSS và sử dụng JavaScript để hiển thị nó. Dưới đây là một kickoff ví dụ cơ bản:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643</title>
<script>
window.onload = function() {
document.getElementById("foo").style.display = 'block';
};
</script>
<style>
#foo { display: none; }
</style>
</head>
<body>
<noscript><p>JavaScript is disabled</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
... hoặc, với sự giúp đỡ của jQueryready() mà là một chút sớm hơn với hiển thị nội dung:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').show();
});
</script>
<style>
#foo { display: none; }
</style>
</head>
<body>
<noscript><p>JavaScript is disabled</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
Để cải thiện kinh nghiệm người dùng, hãy xem xét việc đặt các <script> gọi trực tiếp sau phần tử HTML cụ thể cần được chuyển đổi để không có "flash of content" hoặc "shuffle element". Andrew Moore đã đưa ra một số good example trong chủ đề này.
Hoặc, bạn có thể làm điều đó (hacky) theo cách ngược lại với <style> trong <noscript>. Đây là cú pháp hợp lệ, nhưng cho phép tất cả các trình duyệt từ IE6 trở lên, bao gồm cả Opera W3C-nghiêm ngặt:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2297643 with CSS in noscript</title>
</head>
<body>
<noscript>
<style>#foo { display: none; }</style>
<p>JavaScript is disabled
</noscript>
<div id="foo"><p>JavaScript is enabled</div>
</body>
</html>
Làm thế nào về
<script>
document.write("<h1>Click on the big fancy Javascript widget below</h1>");
</script>
? Chuyển đổi để sử dụng cây DOM nếu bạn muốn.
Điều này đặc biệt là những gì OP muốn tránh. Ngoài ra, document.write()? Trong năm 2010? – thepeer
này sẽ làm việc:
<script type="text/javascript">
if (document != undefined)
{
document.write("Woohoo, JavaScript is enabled!");
}
</script>
<noscript>
Sorry mate, we use JavaScript here.
<noscript>
Tuy nhiên, nó rất xấu và lỗi nếu bạn muốn làm điều này cho một trang HTML "hoàn chỉnh". – BalusC
@BalusC: Tại sao bạn làm điều đó cho trang html "hoàn thành"? Bạn không thêm thẻ '
Tôi thường làm như sau trong các trang HTML của tôi:
<html>
<head>
<!-- head tags here -->
</head>
<body class="js-off">
<script type="text/javascript">
// Polyglot! This is valid MooTools and jQuery!
$(document.body).addClass('js-on').removeClass('js-off');
</script>
<!-- Document markup here -->
</body>
</html>
Sử dụng kỹ thuật này có các ưu điểm sau:
Bạn có thể nhắm mục tiêu cả hai trình duyệt với JavaScript được bật và những người không trực tiếp trong Tệp CSS.
Thẻ XHTML hợp lệ (<style> trong <noscript> không hợp lệ, <noscript> thẻ trong <head> không hợp lệ).
Thay đổi kiểu đầu tiên ngay cả trước khi phần còn lại của trang được hiển thị. Nó cháy trước domReady do đó không có kiểu dáng nhấp nháy.
Bằng cách đó, khi bạn có các tiện ích theo phong cách khác nhau tùy theo JS được bật hay không, bạn có thể xác định kiểu của mình ở cùng một vị trí trong tệp CSS.
<style type="text/css">
#jsWarning {
color: red;
}
#jsConfirm {
color: green;
}
body.js-on #jsWarning,
body.js-off #jsConfirm {
display: none;
}
</style>
<div id="jsWarning">This page requires JavaScript to work properly.</div>
<div id="jsConfirm">Congratulations, JavaScript is enabled!</div>
+1 cho giải pháp thú vị này. – OregonGhost
+1 Đây là giải pháp "thế giới thực" tốt đẹp. – BalusC
Chờ, cả hai lớp js-on và js-off được thiết lập để hiển thị: none ...? Và cũng có thể, nếu bạn đang thao tác thẻ BODY để ẩn đi - bạn cũng sẽ không thấy thông điệp noscript của mình. –
Hiển thị phần tử trong trình xử lý 'onload' có thể làm cho trang bị chỉnh lại, di chuyển các phần tử. Phần tử cũng sẽ không xuất hiện cho đến khi tất cả các hình ảnh trên trang đã tải xong, không phải là điều tốt nếu bạn đang tìm nạp một hình ảnh lớn từ máy chủ chậm :-) Lời gọi 'ready' của jQuery sẽ không có vấn đề này vì nó hoạt động ngay khi tài liệu được phân tích cú pháp. –
Có, cách jQuery hoặc CSS-in-noscript được ưa thích hơn. – BalusC
Sử dụng cách tiếp cận jQuery không thực sự cho biết javascript bị tắt trong trình duyệt, điều đó có nghĩa là jQuery không được tải (có thể bị chặn) hoặc CDN không hoạt động, trong khi các video trên YouTube và tiện ích Facebook của bạn tiếp tục hoạt động tốt . –