Apakah ada HTML yang berlawanan dengan <noscript>?

106

Apakah ada tag di HTML yang hanya akan menampilkan kontennya jika JavaScript diaktifkan? Saya tahu <noscript>bekerja sebaliknya, menampilkan konten HTML-nya saat JavaScript dimatikan. Tetapi saya hanya ingin menampilkan formulir di situs jika JavaScript tersedia, memberi tahu mereka mengapa mereka tidak dapat menggunakan formulir tersebut jika tidak memilikinya.

Satu-satunya cara saya tahu bagaimana melakukan ini adalah dengan document.write();metode di tag skrip, dan tampaknya agak berantakan untuk HTML dalam jumlah besar.

javascript html noscript

— Re0sless
sumber

56

Anda bisa memiliki div tak terlihat yang ditampilkan melalui JavaScript saat halaman dimuat.

— ceejayoz
sumber

217

Cara termudah yang dapat saya pikirkan:

<html>
<head>
    <noscript><style> .jsonly { display: none } </style></noscript>
</head>

<body>
    <p class="jsonly">You are a JavaScript User!</p>
</body>
</html>

Tidak ada document.write, tidak ada skrip, CSS murni.

— Akan
sumber

11

Tidak diperbolehkan setidaknya dalam standar xhtml.

— Dykam

29

@Dykam: diizinkan di HTML5: dev.w3.org/html5/spec/Overview.html#the-noscript-element dan dalam praktiknya, ini didukung oleh hampir semua browser.

— Akankah

3

Ini disarankan untuk digunakan display: none !important, untuk mencegahnya ditimpa oleh aturan yang lebih spesifik (mis. Oleh selektor id atau css), yang ditujukan untuk penggunaannya saat skrip diaktifkan.

— Istador

3

Peringatan: versi Chrome saat ini tidak mengurai tag di dalam <noscript>saat pertama kali Anda menyegarkan laman setelah menonaktifkan Javascript di preferensi. Anda perlu menekan muat ulang dua kali untuk membuatnya berfungsi.

— Tobia

2

Bersih, ringkas, tidak menggunakan javascript. Saya suka itu.

— Dragas

8

Saya tidak begitu setuju dengan semua jawaban di sini tentang menyematkan HTML sebelumnya dan menyembunyikannya dengan CSS sampai ditampilkan lagi dengan JS. Meskipun JavaScript diaktifkan, node tersebut masih ada di DOM. Benar, sebagian besar browser (bahkan browser aksesibilitas) akan mengabaikannya, tetapi masih ada dan mungkin ada saat-saat ganjil ketika itu kembali menggigit Anda.

Metode pilihan saya adalah menggunakan jQuery untuk menghasilkan konten. Jika akan banyak konten, maka Anda dapat menyimpannya sebagai fragmen HTML (hanya HTML yang ingin Anda tampilkan dan tidak ada tag html, body, head, dll.) Lalu gunakan fungsi ajax jQuery untuk memuatnya ke halaman penuh.

test.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8">
     $(document).ready(function() {
       $.get('_test.html', function(html) {
         $('p:first').after(html);
       });
     });
    </script>
</head>
<body>
  <p>This is content at the top of the page.</p>
  <p>This is content at the bottom of the page.</p>
</body>
</html>

_test.html

<p>This is from an HTML fragment document</p>

hasil

<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>

— Chris Bloom
sumber

8

Pertama-tama, selalu pisahkan konten, markup, dan perilaku!

Sekarang, jika Anda menggunakan pustaka jQuery (seharusnya, ini membuat JavaScript jauh lebih mudah), kode berikut harus dilakukan:

$(document).ready(function() {
    $("body").addClass("js");
});

Ini akan memberi Anda kelas tambahan pada tubuh saat JS diaktifkan. Sekarang, di CSS, Anda dapat menyembunyikan area saat kelas JS tidak tersedia, dan menampilkan area saat JS tersedia.

Atau, Anda dapat menambahkan no-jssebagai kelas default ke tag tubuh Anda, dan menggunakan kode ini:

$(document).ready(function() {
    $("body").removeClass("no-js");
    $("body").addClass("js");
});

Ingatlah bahwa itu masih ditampilkan jika CSS dinonaktifkan.

— alexanderpas
sumber

3

Saya memiliki solusi sederhana dan fleksibel, agak mirip dengan Will (tetapi dengan manfaat tambahan sebagai html yang valid):

Berikan elemen tubuh kelas "jsOff". Hapus (atau ganti) ini dengan JavaScript. Memiliki CSS untuk menyembunyikan elemen apa pun dengan kelas "jsOnly" dengan elemen induk dengan kelas "jsOff".

Ini berarti jika JavaScript diaktifkan, kelas "jsOff" akan dihapus dari badan. Ini berarti bahwa elemen dengan kelas "jsOnly" tidak akan memiliki induk dengan kelas "jsOff" dan tidak akan cocok dengan pemilih CSS yang menyembunyikannya, sehingga akan ditampilkan.

Jika JavaScript dinonaktifkan, kelas "jsOff" tidak akan dihapus dari badan. Elemen dengan "jsOnly" akan memiliki induk dengan "jsOff" dan begitu juga dengan cocok dengan pemilih CSS yang menyembunyikannya, sehingga akan disembunyikan.

Berikut kodenya:

<html>
    <head>
        <!-- put this in a separate stylesheet -->
        <style type="text/css">
            .jsOff .jsOnly{
                display:none;
            }
        </style>
    </head>

    <body class="jsOff">
        <script type="text/javascript">
            document.body.className = document.body.className.replace('jsOff','jsOn');
        </script>

        <noscript><p>Please enable JavaScript and then refresh the page.</p></noscript>

        <p class="jsOnly">I am only shown if JS is enabled</p>
    </body>
</html>

Ini html yang valid. Itu sederhana. Itu fleksibel.

Cukup tambahkan kelas "jsOnly" ke elemen apa pun yang ingin Anda tampilkan hanya saat JS diaktifkan.

Harap dicatat bahwa JavaScript yang menghapus kelas "jsOff" harus dijalankan sedini mungkin di dalam tag body. Ini tidak dapat dijalankan lebih awal, karena tag body belum akan ada di sana. Ini tidak boleh dijalankan nanti karena ini berarti bahwa elemen dengan kelas "jsOnly" mungkin tidak langsung terlihat (karena mereka akan cocok dengan pemilih CSS yang menyembunyikannya sampai kelas "jsOff" dihapus dari elemen body).

Ini juga dapat menyediakan mekanisme untuk gaya hanya-js (misalnya .jsOn .someClass{}) dan gaya hanya-js (misalnya .jsOff .someOtherClass{}). Anda dapat menggunakannya untuk memberikan alternatif untuk <noscript>:

.jsOn .noJsOnly{
    display:none;
}

— Spycho
sumber

1

Anda juga dapat menggunakan Javascript untuk memuat konten dari file sumber lain dan mengeluarkannya. Itu mungkin sedikit lebih kotak hitam daripada yang Anda cari.

— TheSmurf
sumber

1

Berikut adalah contoh cara div tersembunyi:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *[data-when-js-is-on] {
                display: none;
            }
        </style>
        <script>
            document.getElementsByTagName("style")[0].textContent = "";
        </script>
    </head>
    <body>
        <div data-when-js-is-on>
            JS is on.
        </div>
    </body>
</html>

(Anda mungkin harus menyesuaikannya untuk IE yang buruk, tetapi Anda mengerti.)

— Bayangan2531
sumber

1

Solusi saya

.css:

.js {
display: none;
}

.js:

$(document).ready(function() {
    $(".js").css('display', 'inline');
    $(".no-js").css('display', 'none');
});

.html:

<span class="js">Javascript is enabled</span>
<span class="no-js">Javascript is disabled</span>

— prgDevelop
sumber

Dalam contoh html Anda, tidakkah Anda ingin mengakhiri baris dengan </span>?

— singkat

0

Artikel Alex muncul di benak di sini, namun itu hanya berlaku jika Anda menggunakan ASP.NET - itu dapat ditiru dalam JavaScript tetapi sekali lagi Anda harus menggunakan document.write ();

— Ross
sumber

0

Anda bisa menyetel visibilitas paragraf | div ke 'tersembunyi'.

Kemudian di fungsi 'onload', Anda dapat mengatur visibilitas menjadi 'terlihat'.

Sesuatu seperti:

<body onload = "javascript: document.getElementById (rec) .style.visibility = visible"> <p style = "visibility: visible" id = "rec"> Teks ini akan disembunyikan kecuali javascript tersedia. </p>

0

Tidak ada tag untuk itu. Anda perlu menggunakan javascript untuk menampilkan teks.

Beberapa orang sudah menyarankan menggunakan JS untuk secara dinamis mengatur CSS terlihat. Anda juga dapat membuat teks document.getElementById(id).innerHTML = "My Content"secara dinamis dengan atau membuat node secara dinamis, tetapi peretasan CSS mungkin yang paling mudah dibaca.

— cpm
sumber

0

Dalam dekade sejak pertanyaan ini diajukan, HIDDENatribut ditambahkan ke HTML. Ini memungkinkan seseorang untuk langsung menyembunyikan elemen tanpa menggunakan CSS. Seperti solusi berbasis CSS, elemen harus disembunyikan oleh skrip:

<form hidden id=f>
Javascript is on, form is visible.<br>
<button>Click Me</button>
</form>
<script>
document.getElementById('f').hidden=false;
</script>
<noscript>
Javascript is off, but form is hidden, even when CSS is disabled.
</noscript>

— Membuang
sumber