Esiste un HTML opposto a <noscript>?
https://stackoverflow.com/questions/30319
-
09-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Esiste un tag in HTML che visualizzerà il suo contenuto solo se JavaScript è abilitato?Lo so <noscript> funziona al contrario, visualizzando il 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 ce l'hanno.
L'unico modo che conosco per farlo è con il file document.write(); metodo in un tag script e sembra un po' complicato per grandi quantità di HTML.
Soluzione
Potresti avere un div invisibile che viene mostrato tramite JavaScript quando la pagina viene caricata.
Altri suggerimenti
Il modo più semplice che mi viene in mente:
<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.
Non sono davvero d'accordo con tutte le risposte qui sull'incorporamento dell'HTML in anticipo e sul nasconderlo con CSS finché 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 ignoreranno, ma esiste ancora e potrebbero esserci momenti strani in cui si ritorce contro.
Il mio metodo preferito sarebbe utilizzare jQuery per generare il contenuto.Se si tratterà di molto contenuto, puoi salvarlo come frammento HTML (solo l'HTML che desideri mostrare e nessun elemento html, body, head, ecc.tag) quindi utilizzare le funzioni ajax di jQuery per caricarlo nella pagina intera.
prova.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>
_prova.html
<p>This is from an HTML fragment document</p>
risultato
<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 utilizzando la libreria jQuery (dovresti davvero, rende JavaScript molto più semplice), il seguente codice dovrebbe fare:
$(document).ready(function() {
$("body").addClass("js");
});
Questo ti darà una classe aggiuntiva sul corpo quando JS è abilitato.Ora, nei CSS, puoi nascondere l'area quando la classe JS non è disponibile e mostrare l'area quando JS è disponibile.
In alternativa, puoi aggiungere no-js come classe predefinita per il tag body e utilizza questo codice:
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});
Ricorda che viene comunque 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 codice HTML valido):
Assegna all'elemento body una classe "jsOff".Rimuovi (o sostituisci) questo con JavaScript.Chiedi ai CSS di 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 mostrati.
Se JavaScript è disabilitato, la classe "jsOff". non lo farà essere rimosso dal corpo.Elementi con "jsOnly" Volere avere un genitore con "jsOff" e così Volere corrispondono al selettore CSS che li nasconde, quindi verranno 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 codice HTML valido.È semplice.È flessibile.
Aggiungi semplicemente la classe "jsOnly" a qualsiasi elemento che desideri visualizzare solo quando JS è abilitato.
Tieni presente che il JavaScript che rimuove la classe "jsOff" deve essere eseguito il prima possibile all'interno del tag body.Non può essere eseguito prima, poiché il tag body non sarà ancora presente.Non dovrebbe essere eseguito in seguito poiché significherebbe che gli elementi con la classe "jsOnly" potrebbero non essere immediatamente visibili (poiché corrisponderanno al selettore CSS che li nasconde finché la classe "jsOff" non viene rimossa dall'elemento body).
Ciò potrebbe anche fornire un meccanismo per lo stile solo js (ad es. .jsOn .someClass{}) e stili senza solo js (ad es. .jsOff .someOtherClass{}).Potresti usarlo per fornire un'alternativa a <noscript>:
.jsOn .noJsOnly{
display:none;
}
Puoi anche utilizzare Javascript per caricare il contenuto da un altro file sorgente e visualizzarlo.Potrebbe essere un po' più scatola nera di quanto stai cercando.
Ecco un esempio per il metodo 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 un'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 comunque essere emulato in JavaScript ma ancora una volta dovresti usare document.write();
Potresti impostare la visibilità di un paragrafo|div su "nascosto".
Quindi nella funzione "onload", puoi impostare la visibilità su "visibile".
Qualcosa di simile a:
u003Cbody onload="javascript:document.getElementById(rec).style.visibility=visible">nu003Cp style="visibility:visibile" id="rec">Testo da nascondere a meno che Javascript non sia disponibile.</p>
Non c'è un tag per quello.Dovresti usare JavaScript per mostrare il testo.
Alcune persone hanno già suggerito di utilizzare JS per impostare dinamicamente i CSS visibili.Potresti anche generare dinamicamente il testo con document.getElementById(id).innerHTML = "My Content" o creando dinamicamente i nodi, ma l'hack CSS è probabilmente il più semplice da leggere.
