C'è un tag in HTML che mostrerà il suo contenuto solo se JavaScript è abilitato? So che <noscript>funziona al contrario, mostrando il suo contenuto HTML quando JavaScript è disattivato. Ma vorrei visualizzare un modulo su un sito solo se JavaScript è disponibile, spiegando loro perché non possono utilizzare il modulo se non lo hanno.
L'unico modo in cui so come farlo è con il document.write();metodo in un tag di script, e sembra un po 'disordinato per grandi quantità di HTML.
Risposte:
Il modo più semplice a cui posso pensare:
<html>
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
<body>
<p class="jsonly">You are a JavaScript User!</p>
</body>
</html>Nessun document.write, nessuno script, puro CSS.
display: none !important, per evitare che venga sovrascritto da regole più specifiche (es. Selettori id o css), che mirano al suo utilizzo quando gli script sono abilitati.
<noscript>la prima volta che aggiorni una pagina dopo aver disabilitato Javascript nelle preferenze. Devi premere due volte ricarica per farlo funzionare.
Non sono davvero d'accordo con tutte le risposte qui sull'incorporamento dell'HTML in anticipo e sul nasconderlo con CSS fino a quando non viene nuovamente mostrato con JS. Anche senza JavaScript abilitato, quel nodo esiste ancora nel DOM. È vero, la maggior parte dei browser (anche i browser di accessibilità) lo ignorerà, ma esiste ancora e potrebbero esserci dei momenti strani in cui torna a morderti.
Il mio metodo preferito sarebbe usare jQuery per generare il contenuto. Se sarà molto contenuto, allora puoi salvarlo come un frammento HTML (solo l'HTML che vuoi mostrare e nessuno dei tag html, body, head, ecc.) Quindi usa le funzioni ajax di jQuery per caricarlo in la pagina intera.
<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><p>This is from an HTML fragment document</p><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>Prima di tutto, separa sempre contenuto, markup e comportamento!
Ora, se stai usando la libreria jQuery (dovresti davvero, rende JavaScript molto più semplice), il seguente codice dovrebbe funzionare:
$(document).ready(function() {
$("body").addClass("js");
});Questo ti darà una classe aggiuntiva sul corpo quando JS è abilitato. Ora, in CSS, puoi nascondere l'area quando la classe JS non è disponibile e mostrare l'area quando JS è disponibile.
In alternativa, puoi aggiungere no-jscome classe predefinita al tuo tag body e utilizzare questo codice:
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});Ricorda che è ancora visualizzato se CSS è disabilitato.
Ho una soluzione semplice e flessibile, in qualche modo simile a quella di Will (ma con l'ulteriore vantaggio di essere un HTML valido):
Assegna all'elemento body una classe di "jsOff". Rimuovilo (o sostituiscilo) con JavaScript. Avere CSS per nascondere tutti gli elementi con una classe "jsOnly" con un elemento genitore con una classe "jsOff".
Ciò significa che se JavaScript è abilitato, la classe "jsOff" verrà rimossa dal corpo. Ciò significa che gli elementi con una classe "jsOnly" non avranno un genitore con una classe "jsOff" e quindi non corrisponderanno al selettore CSS che li nasconde, quindi verranno visualizzati.
Se JavaScript è disabilitato, la classe "jsOff" non verrà rimossa dal corpo. Elementi con "jsOnly" dovranno avere un genitore con "jsOff" e così sarà abbinare il selettore CSS che nasconde loro, in tal modo essi vengono nascosti.
Ecco il codice:
<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>È un HTML valido. È semplice. È flessibile.
Aggiungi semplicemente la classe "jsOnly" a qualsiasi elemento che desideri visualizzare solo quando JS è abilitato.
Tieni presente che JavaScript che rimuove la classe "jsOff" dovrebbe essere eseguito il prima possibile all'interno del tag body. Non può essere eseguito prima, poiché il tag body non sarà ancora lì. Non dovrebbe essere eseguito in seguito poiché significa che gli elementi con la classe "jsOnly" potrebbero non essere immediatamente visibili (poiché corrisponderanno al selettore CSS che li nasconde fino a quando la classe "jsOff" non viene rimossa dall'elemento body).
Questo potrebbe anche fornire un meccanismo per lo styling solo js (ad esempio .jsOn .someClass{}) e per lo styling solo no-js (ad esempio .jsOff .someOtherClass{}). Potresti usarlo per fornire un'alternativa a <noscript>:
.jsOn .noJsOnly{
display:none;
}Ecco un esempio per il modo div nascosto:
<!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>(Probabilmente dovresti modificarlo per il povero IE, ma hai l'idea.)
La mia soluzione
.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>L'articolo di Alex mi viene in mente qui, tuttavia è applicabile solo se stai usando ASP.NET - potrebbe essere emulato in JavaScript, ma di nuovo dovresti usare document.write ();
Puoi impostare la visibilità di un paragrafo | div su "nascosto".
Quindi nella funzione "onload", puoi impostare la visibilità su "visibile".
Qualcosa di simile a:
<body onload = "javascript: document.getElementById (rec) .style.visibility = visible"> <p style = "visible: visible" id = "rec"> Questo testo deve essere nascosto a meno che non sia disponibile javascript. </p>
Non c'è un tag per questo. Dovresti usare javascript per mostrare il testo.
Alcune persone hanno già suggerito di utilizzare JS per impostare dinamicamente i CSS visibili. Puoi anche generare dinamicamente il testo document.getElementById(id).innerHTML = "My Content"o creare dinamicamente i nodi, ma l'hack CSS è probabilmente il più semplice da leggere.
Nel decennio successivo a questa domanda, l' HIDDENattributo è stato aggiunto all'HTML. Permette di nascondere direttamente gli elementi senza usare CSS. Come con le soluzioni basate su CSS, l'elemento deve essere non nascosto dallo script:
<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>