2009-09-16 11 views
21

Disons que j'ai le code HTML comme ceci:Comment envelopper <noscript> tag pour cacher le contenu lorsque javascript désactiver

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

Et je veux ajouter un tag il <noscript>. Ce qui signifie que si JavaScript est désactivé, il apparaîtra comme une page blanche.

Et seulement lorsque JavaScript est désactivé, il affichera "Ceci est le texte du contenu".

Veuillez me donner quelques exemples à réaliser. Merci.

Répondre

4

C'est un peu étrange.

Vous n'avez même pas besoin d'un 'noscript' pour cela. Vous pouvez juste avoir une première page vierge, qui est seulement le contenu est un javascript de la forme:

document.location = '/realpage.htm'; 

Et puis appeler OnLoad, avec jQuery, ou autre chose. Cela signifie que si le client n'a pas de script, il ne va nulle part, par conséquent la page reste vide.

Edit:

Exemple, comme l'a demandé:

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

salut soyeux, Je veux essayer votre chemin aussi. Mais à cause du manque de connaissances. Je ne sais pas comment faire. Pouvez-vous écrire l'exemple de code pour moi de tester? Merci. –

+0

Merci pour votre réponse soyeuse. Je l'ai. –

+0

À moins que votre site n'autorise qu'un utilisateur à accéder à une page de passerelle, vous avez besoin de deux pages pour chaque page que vous souhaitez afficher. Ouais? Ou seulement avoir des sites Web d'une page. – BillR

4

La balise noscript fonctionne dans l'autre sens. Pour rendre le contenu visible quand le script est activé, le mettre dans un élément qui est caché, et le montrer script en utilisant:

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

Wrap vous tous contenu à l'intérieur d'un div principal avec aucun d'affichage et dans la fonction onload changer la afficher pour bloquer.

<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

merci, ça fonctionne. Je veux juste savoir une autre question que, même si nous ajoutons une balise noscript, peuvent-ils toujours voir le code source? –

+0

Oui, bien sûr, noscript n'a rien à voir avec la génération HTML. – rahul

+0

ah okie. Merci pour votre réponse rapide et rapide. –

0

Vous pouvez faire quelque chose comme

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

Une alternative à une approche JS comme suggéré par Rahul est d'afficher un div dans l'élément <noscript>, couvrant toute la page:

<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

Ceci est une excellente solution, merci! – jkraybill

+21

Brillant! Je voudrais upvote mais je n'ai pas javascript activé .. :-) –

+0

Vous avez mon upvote parce que c'est exactement ce que je voulais faire, mais j'avais besoin d'aide pour les attributs de style. – TecBrat

2

DEVRAIT vraiment fonctionner! cacher un contenu lorsque javascript est pas activé Note: vous pouvez remplacer <noscript> avec <noembed> ou <noframes> aussi.

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

Afficher un message Your browser does not support JavaScript! après qui redirigent vers les autres pages

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

'window.location.href' ne fonctionnera pas étant donné que JavaScript est désactivé. –

1

J'ai eu un problème très:

Je voulais montrer le site complet lorsque javascript est activé. Cependant, si javascript était désactivé, non seulement je voulais afficher un message "ce site nécessite javascript ...", mais je voulais quand même afficher l'en-tête & footer (qui se trouve dans header.inc et footer.inc, appelé par chaque page de contenu) de mon site (pour être belle).En d'autres termes, je voulais seulement remplacer la zone de contenu principal de mon site. Voici mon html/solution css:

fichier header.inc (emplacement n'a pas d'importance):

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

fichier d'en-tête (en bas):

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

fichier 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; 
} 

En résumé, mon message "javascript requis" est masqué par ma règle CSS par défaut. Cependant, lorsque le navigateur analyse le tag, il remplace la règle par défaut, ce qui entraîne la dissimulation du contenu principal et (tout sauf l'en-tête/pied de page) et l'affichage du message javascript. Fonctionne parfaitement ... pour mes besoins! Espérons que quelqu'un d'autre trouve cela :-) utile

Voici deux captures d'écran avec javascript Activé/Désactivé:

enter image description here

enter image description here

0

Les deux balises de style et la meta refresh ne fonctionnent à l'intérieur noscript :

<noscript> 

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

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

</noscript> 

La première ligne sera affiche la page actuelle mais vide. La deuxième ligne va rediriger vers blankpage.html

Questions connexes