Czy istnieje kod HTML przeciwny do <noscript>?

106

Czy w kodzie HTML jest tag, który będzie wyświetlał zawartość tylko przy włączonym JavaScript? Wiem, że <noscript>działa odwrotnie, wyświetlając zawartość HTML, gdy JavaScript jest wyłączony. Chciałbym jednak wyświetlać formularz w witrynie tylko wtedy, gdy dostępny jest JavaScript, informując ich, dlaczego nie mogą użyć formularza, jeśli go nie mają.

Jedynym sposobem, w jaki wiem, jak to zrobić, jest użycie document.write();metody w tagu skryptu i wydaje się to trochę kłopotliwe w przypadku dużych ilości HTML.

javascript html noscript Re0sless
źródło

Odpowiedzi:

56

Możesz mieć niewidoczny element DIV, który jest wyświetlany za pomocą JavaScript podczas ładowania strony.

ceejayoz
źródło
217

Najłatwiej przychodzi mi do głowy:

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

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

Bez document.write, bez skryptów, czysty CSS.

Będzie
źródło
11
Niedozwolone przynajmniej w standardzie xhtml.
Dykam
29
@Dykam: jest to dozwolone w HTML5: dev.w3.org/html5/spec/Overview.html#the-noscript-element iw praktyce jest obsługiwane przez praktycznie każdą przeglądarkę.
Czy
3
Zaleca się display: none !important, aby nie był on zastępowany przez bardziej szczegółowe reguły (np. Przez selektory id lub css), których celem jest jego użycie, gdy włączone są skrypty.
Istador
3
Słowo ostrzeżenia: obecne wersje Chrome nie analizują tagów wewnątrz <noscript>przy pierwszym odświeżaniu strony po wyłączeniu Javascript w preferencjach. Aby to zadziałało, musisz dwukrotnie nacisnąć przycisk przeładowania.
Tobia
2
Czysty, zwięzły, nie używa javascript. Lubię to.
Dragas
8

Nie zgadzam się ze wszystkimi odpowiedziami tutaj dotyczącymi wcześniejszego osadzania HTML i ukrywania go za pomocą CSS, dopóki nie zostanie ponownie pokazany w JS. Nawet bez włączonej obsługi JavaScript ten węzeł nadal istnieje w DOM. To prawda, że ​​większość przeglądarek (nawet przeglądarek z ułatwieniami dostępu) zignoruje to, ale nadal istnieje i mogą wystąpić dziwne chwile, kiedy to wróci, by cię ugryźć.

Moją preferowaną metodą byłoby użycie jQuery do wygenerowania treści. Jeśli będzie to dużo treści, możesz zapisać to jako fragment HTML (tylko HTML, który chcesz wyświetlić, bez tagów html, body, head itp.), A następnie użyj funkcji Ajax jQuery, aby załadować go do całą stronę.

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>

wynik

<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
źródło
8

Przede wszystkim zawsze oddzielaj treść, znaczniki i zachowanie!

Teraz, jeśli używasz biblioteki jQuery (naprawdę powinieneś, to znacznie ułatwia JavaScript), następujący kod powinien wystarczyć:

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

To da ci dodatkową klasę w ciele, gdy włączony jest JS. Teraz w CSS możesz ukryć obszar, gdy klasa JS nie jest dostępna, i pokazać obszar, gdy JS jest dostępny.

Alternatywnie możesz dodać no-jsklasę domyślną do swojego tagu body i użyć tego kodu:

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

Pamiętaj, że jest nadal wyświetlany, jeśli CSS jest wyłączony.

alexanderpas
źródło
3

Mam proste i elastyczne rozwiązanie, nieco podobne do Will'a (ale z dodatkową zaletą bycia prawidłowym html):

Nadaj elementowi body klasę „jsOff”. Usuń (lub zamień) to na JavaScript. CSS ma ukryć wszystkie elementy z klasą „jsOnly” z elementem nadrzędnym z klasą „jsOff”.

Oznacza to, że jeśli JavaScript jest włączony, klasa „jsOff” zostanie usunięta z treści. Oznacza to, że elementy z klasą „jsOnly” nie będą miały rodzica z klasą „jsOff”, a więc nie będą pasować do selektora CSS, który je ukrywa, więc zostaną wyświetlone.

Jeśli JavaScript jest wyłączony, klasa „jsOff” nie zostanie usunięta z treści. Elementy z „jsOnly” będą miały rodzica z „jsOff”, a więc będą pasować do selektora CSS, który je ukrywa, więc będą ukryte.

Oto kod:

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

To poprawny html. To jest proste. Jest elastyczny.

Po prostu dodaj klasę „jsOnly” do dowolnego elementu, który chcesz wyświetlać tylko wtedy, gdy włączony jest JS.

Zwróć uwagę, że JavaScript, który usuwa klasę „jsOff”, powinien być wykonywany jak najwcześniej wewnątrz tagu body. Nie można go wykonać wcześniej, ponieważ tagu body jeszcze nie ma. Nie należy go wykonywać później, ponieważ będzie to oznaczać, że elementy z klasą „jsOnly” mogą nie być od razu widoczne (ponieważ będą pasować do selektora CSS, który je ukrywa, dopóki klasa „jsOff” nie zostanie usunięta z elementu body).

Mogłoby to również zapewnić mechanizm stylizacji tylko js (np. .jsOn .someClass{}) I stylów no-js (np .jsOff .someOtherClass{}.). Możesz go użyć jako alternatywy dla <noscript>:

.jsOn .noJsOnly{
    display:none;
}
Spycho
źródło
1

Możesz także użyć JavaScript do załadowania treści z innego pliku źródłowego i wyprowadzenia tego. To może być trochę bardziej czarne pudełko niż szukasz.

Smerf
źródło
1

Oto przykład ukrytego sposobu div:

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

(Prawdopodobnie musiałbyś go dostosować do słabego IE, ale masz pomysł.)

Cień2531
źródło
1

Moje rozwiązanie

.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
źródło
Czy w swoim przykładzie HTML nie chcesz kończyć wierszy na </span>?
krótko
0

Przychodzi tu na myśl artykuł Alexa , jednak ma on zastosowanie tylko wtedy, gdy używasz ASP.NET - można go jednak emulować w JavaScript, ale znowu musiałbyś użyć document.write ();

Ross
źródło
0

Możesz ustawić widoczność elementu div akapitu na „ukryty”.

Następnie w funkcji „onload” możesz ustawić widoczność na „visible”.

Coś jak:

<body onload = "javascript: document.getElementById (rec) .style.visibility = visible"> <p style = "visibility: visible" id = "rec"> Ten tekst ma być ukryty, chyba że jest dostępny javascript. </p>


źródło
0

Nie ma na to etykiety. Aby wyświetlić tekst, musisz użyć javascript.

Niektórzy ludzie już zasugerowali użycie JS do dynamicznego ustawienia widoczności CSS. Możesz również dynamicznie generować tekst document.getElementById(id).innerHTML = "My Content"lub dynamicznie tworzyć węzły, ale hack CSS jest prawdopodobnie najłatwiejszy do odczytania.

cpm
źródło
0

W ciągu dekady, od kiedy zadano to pytanie, HIDDENatrybut został dodany do HTML. Pozwala bezpośrednio ukrywać elementy bez używania CSS. Podobnie jak w przypadku rozwiązań opartych na CSS, element musi być odblokowany przez skrypt:

<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>
Głaskanie pod brodę
źródło