2009-09-16 6 views
21

Diciamo, Ho codice HTML simile a questo:Come avvolgere <noscript> tag per nascondere il contenuto quando javascript disattivare

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
This is content. 
</body> 
</html> 

E voglio aggiungere un tag <noscript> lì. Il che significa che se JavaScript disabilitato, verrà visualizzato come una pagina vuota.

E solo quando JavaScript è disabilitato, mostrerà "Questo è il testo del contenuto".

Per favore dammi alcuni esempi da raggiungere. Grazie.

risposta

4

È un po 'strano.

Per questo non è nemmeno necessario un 'noscript'. Si può solo avere una prima pagina vuota, il cui unico contenuto è un javascript di forma:

document.location = '/realpage.htm'; 

E poi chiamare quel OnLoad, con jQuery, o qualsiasi altra cosa. Ciò significa che se il client non ha script, non vanno da nessuna parte, quindi la pagina rimane vuota.

Edit:

esempio, come richiesto:

<html> 
<body onload="document.location = 'realpage.html';"> 
</body> 
</html> 
+0

hi setosa, voglio provare il vostro modo troppo. Ma a causa della mancanza di conoscenza. Non so come fare. Puoi scrivere il codice di esempio per me da testare? Grazie. –

+0

Grazie per la tua risposta setosa. Fatto. –

+0

A meno che il tuo sito non consenta a un utente di accedervi tramite una pagina del gateway, sono necessarie due pagine per ogni pagina che desideri visualizzare. Si? O hai solo siti web di una pagina. – BillR

4

Il tag noscript funziona il contrario. Per rendere il contenuto visibile quando lo script è abilitata, metterlo in un elemento che è nascosto, e mostrarlo utilizzando lo script:

<div id="hasScript" style="display:none"> 
This is content 
</div> 
<script>document.getElementById('hasScript').style.display='';</script> 
21

Wrap tutti voi i contenuti all'interno di un div principale con display nessuno e nella funzione onload cambiare la mostra per bloccare.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
</head> 
<body> 
    <div id="divMain" style="display: none"> 
    This is content. 
    </div> 
<noscript> 
    JS not enabled 
</noscript> 
<script> 
    document.getElementById("divMain").style.display = "block"; 
</script> 
</body> 
</html> 
+0

grazie sta funzionando. Voglio solo sapere un'altra domanda che, anche se aggiungiamo il tag noscript, possono ancora visualizzare il codice sorgente? –

+0

Sì, naturalmente, noscript non ha nulla a che fare con la generazione di HTML. – rahul

+0

ah okie. Grazie per la tua risposta rapida e veloce. –

0

Si potrebbe fare qualcosa di simile

<body id="thebody"> 
    this is content. 
    <script> 
    document.getElementById('thebody').innerHTML = "<p>content when JS is enabled!"; 
    </script> 
</body> 
50

Un'alternativa a un approccio JS come suggerito da Rahul è quello di visualizzare un div nell'elemento <noscript>, che copre l'intera pagina:

<noscript> 
    <div style="position: fixed; top: 0px; left: 0px; z-index: 3000; 
       height: 100%; width: 100%; background-color: #FFFFFF"> 
     <p style="margin-left: 10px">JavaScript is not enabled.</p> 
    </div> 
</noscript> 
+0

Questa è un'ottima soluzione, grazie! – jkraybill

+21

Brillante! lo avrei invalso, ma non ho abilitato javascript .. :-) –

+0

Hai ottenuto la mia revoca perché è esattamente quello che volevo fare, ma avevo bisogno di aiuto con gli attributi di stile. – TecBrat

2

Questo DOVREBBE funziona davvero! nascondono un contenuto quando JavaScript non è abilitato Nota: è possibile sostituire con <noscript><noembed> o <noframes>, troppo.

<!-- Normal page content should be here: --> 
Content 
<!-- Normal page content should be here: --> 
<noscript> 
<div style="position: absolute; right: 0; bottom: 0; 
    display: none; visibility: hidden"> 
</noscript> 
<-- Content that should hide begin --> 
**Don't Show! Content** 
<-- Content that should hide begin --> 
<noscript> 
</div> 
</noscript> 
<!-- Normal page content should be here: --> 
Content 
<!-- Normal page content should be here: --> 
-1

Mostra un messaggio Your browser does not support JavaScript! dopo che reindirizzano a altra pagina

<noscript>Your browser does not support JavaScript! 
    window.location.href = "http://example.com" // redirect to other page 
    </noscript> 
+4

'window.location.href' non funzionerà considerando che JavaScript è disabilitato. –

1

Ho avuto un problema:

ho voluto mostrare il sito pieno quando JavaScript è stato abilitato. Tuttavia, se javascript fosse disabilitato, non solo volevo mostrare un messaggio "questo sito richiede javascript ...", ma volevo comunque mostrare l'intestazione & footer (che risiede in header.inc e footer.inc, chiamato da ogni pagina di contenuto) del mio sito (per apparire belli).In altre parole, volevo solo sostituire l'area del contenuto principale del mio sito. Ecco la mia soluzione html/css:

header.inc di file (posizione non è importante):

<noscript> 
    <style> 
     .hideNoJavascript { 
      display: none; 
     } 
     #noJavascriptWarning { 
      display: block !important; 
     } 
    </style> 
</noscript> 

file di intestazione (in basso):

<div id="noJavascriptWarning">The Ignite site requires Javascript to be enabled!</div> 
<div class="container-fluid hideNoJavascript"> 
<!-- regular .php content here --> 

file CSS:

#noJavascriptWarning { 
    color: #ed1c24; 
    font-size: 3em; 
    display: none; /* this attribute will be overridden as necessary in header.inc */ 
    text-align: center; 
    max-width: 70%; 
    margin: 100px auto; 
} 

In sintesi, il mio messaggio "javascript required" è nascosto per la mia regola CSS predefinita. Tuttavia, quando il browser analizza il tag, sostituisce la regola predefinita, con il risultato che il contenuto principale viene nascosto e (tutto tranne l'intestazione/piè di pagina) e il messaggio javascript visualizzato. Funziona perfettamente ... per i miei bisogni! Speriamo che qualcun altro trova questo utile :-)

Qui ci sono due screenshot con javascript abilitato/disabilitato:

enter image description here

enter image description here

0

Sia il tag stile e la meta refresh funzionano all'interno noscript :

<noscript> 

<style>body { display:none; }</style> 

<meta http-equiv="refresh" content="0; url=blankpage.html"> 

</noscript> 

La prima linea sarà mostra la pagina corrente ma vuota. la seconda linea reindirizzerà al blankpage.html

Problemi correlati