Ne devrions-nous pas utiliser l'élément <noscript>?
J'ai trouvé quelques bons inconvénients ici:
L'élément noscript détecte uniquement si JavaScript est activé ou non sur le navigateur. Si JavaScript est désactivé dans le pare-feu plutôt que dans le navigateur, il ne s'exécutera pas et le contenu de l'élément noscript ne sera pas affiché.
De nombreux scripts dépendent d'une ou de plusieurs fonctionnalités du langage pris en charge pour pouvoir être exécutés (par exemple, document.getElementById). Si les fonctionnalités requises ne sont pas prises en charge, JavaScript ne peut pas être exécuté, mais comme JavaScript est pris en charge, le contenu noscript ne sera pas affiché.
Le lieu le plus utile pour utiliser l'élément noscript est dans l'en-tête de la page, où il serait possible de déterminer de manière sélective quels éléments de style et méta seront appliqués à la page lors du chargement de la page plutôt que d'attendre le chargement de la page. Malheureusement, l'élément noscript n'est valide que dans le corps de la page et ne peut donc pas être utilisé dans l'en-tête.
L'élément noscript est un élément de niveau bloc et ne peut donc être utilisé que pour afficher des blocs entiers de contenu lorsque JavaScript est désactivé. Il ne peut pas être utilisé en ligne.
Idéalement, les pages Web devraient utiliser HTML pour le contenu, CSS pour l'apparence et JavaScript pour le comportement. Utiliser l'élément noscript, c'est appliquer un comportement à partir du code HTML plutôt que de le faire à partir de JavaScript.
Source: http://javascript.about.com/od/reference/a/noscriptnomore.htm
Je suis très d'accord sur le dernier point. Est-il possible de créer et d'ajouter un fichier <noscript> externe? Devrions-nous placer <noscript> dans le <head>?
Il est préférable que la valeur par défaut soit non javascript, puis de laisser un code javascript remplacer par une page compatible javascript. Ne doit pas être beaucoup. Peut simplement être un bloc display:none;, qui est ensuite défini sur display:block; par javascript, et inversement pour la page non-js.
Après avoir réfléchi pendant plusieurs jours et modifié mon code, je pense avoir une image plus claire maintenant et j'aimerais partager mes deux sous à ce sujet avant que j'oublie.
<div id='noscript'>show non-js content</div>
<script>document.getElementById('noscript').style.display='none';</script>
<script id='required script'>show js content</script>
contre
<noscript>show non-js content</noscript>
<script id='required script'>//show js content</script>
Selon la situation, trois cas sont à considérer:
Cas 1 - Si le script requis est en ligne
JavaScript désactivé
- Le contenu dans l'élément
<noscript>apparaît immédiatement, le contenu non-js est - Le contenu dans l'élément
<div>apparaît immédiatement, le contenu non-js est affiché
JavaScript activé
- Le contenu dans l'élément
<noscript>n'apparaît pas du tout, le contenu js est affiché - Le contenu de l'élément
<div>peut apparaître momentanément avant d'être masqué, js Contenu affiché
Dans ce cas, utiliser l'élément <noscript> est avantageux.
Cas 2 - Si le script requis provient d'une source externe (tierce), mais le masquage de l'élément <div> est effectué à l'aide du script en ligne.
JavaScript désactivé
- Le contenu dans l'élément
<noscript>apparaît immédiatement, le contenu non-js est - Le contenu dans l'élément
<div>apparaît immédiatement, le contenu non-js est affiché
JavaScript activé mais le script requis est bloqué
- Le contenu de l'élément
<noscript>n'apparaît pas du tout, rien n'est affiché! - Le contenu de l'élément
<div>peut apparaître momentanément avant d'être masqué, rien n'est affiché!
JavaScript activé et le script requis est reçu
- Le contenu dans l'élément
<noscript>n'apparaît pas du tout, le contenu js est affiché - Le contenu de l'élément
<div>peut apparaître momentanément avant d'être masqué, js Contenu affiché
Dans ce cas, utiliser l'élément <noscript> est avantageux.
Cas 3 - Si nécessaire, le script masque l'élément <div>
JavaScript désactivé
- Le contenu dans l'élément
<noscript>apparaît immédiatement, le contenu non-js est - Le contenu dans l'élément
<div>apparaît immédiatement, le contenu non-js est affiché
JavaScript activé mais le script requis est bloqué
- Le contenu de l'élément
<noscript>n'apparaît pas du tout, rien n'est affiché! - Le contenu dans l'élément
<div>apparaît, le contenu non-js est affiché
JavaScript activé et le script requis est reçu
- Le contenu dans l'élément
<noscript>n'apparaît pas du tout, le contenu js est affiché - Le contenu de l'élément
<div>peut apparaître momentanément avant d'être masqué, js Contenu affiché
Dans ce cas, utiliser l'élément <div> est avantageux.
En résumé
Utilisez l'élément <noscript> si le rendu du contenu HTML dépend de scripts tiers ou si le script requis est en ligne. Sinon, utilisez l'élément <div> et assurez-vous que le script requis contient:
document.getElementById('noscript').style.display='none';
Bien que Tor Valamo apporte une réponse élégante à ce problème, il existe un problème qui peut vous amener à refuser l'utilisation de cette technique.
Le problème est (généralement) IE. Il a tendance à charger et à exécuter le JS un peu plus lentement que les autres navigateurs, ce qui le fait flasher parfois la div "Please Enable Your Javascript" pendant une fraction de seconde avant de charger le JS et de masquer le div.
C'est agaçant et pour contourner cela, vous pouvez mettre en œuvre le "classique". <noscript> approche de redirection.
<head>
<noscript><meta http-equiv="refresh" content="0; URL=/NO_SCRIPT_URL/ROUTE_HERE"/></noscript>
</head>
C'est la technique la plus solide que j'ai rencontrée en ce qui concerne ce petit méchant.
Une application utile pour noscript que j'ai déjà vue est le chargement asynchrone de contenu lourd progressivement amélioré (en particulier "en dessous du pli"). Les grandes images, iframes, etc. peuvent être encapsulés dans noscript dans la source HTML, puis les éléments non enveloppés peuvent être ajoutés à la page à l'aide de JavaScript une fois que le DOM est prêt. Cela débloque la page et permet une expérience de chargement initial beaucoup plus rapide, en particulier si votre interface repose sur les interactions JS/JQ appliquées après la préparation du document (2 secondes contre 6 secondes pour une page de portefeuille sur laquelle j'ai consulté).
De nos jours, il semble que presque tous les navigateurs utilisent Javascript, mais vous ne pouvez jamais savoir qui va accéder à votre site. De nos jours, même les lecteurs d'écran et les robots d'indexation Web utilisent Javascript, et font parfois des requêtes AJAX le cas échéant.
Cela dit, si vous voulez revenir à l'absence de Javascript, il existe un meilleur moyen qu'une balise <noscript>. Faites simplement ceci dans la HEAD de votre document:
<script type="text/javascript">
document.getElementsByTagName('html')[0].className += ' Q_js'; // better than noscript
</script>
Avec cette technique, vous pouvez facilement vous référer à la classe Q_js dans votre CSS pour masquer des éléments. Avec la balise <noscript>, le mieux que vous puissiez espérer est d'inclure un fichier CSS supplémentaire pour remplacer le CSS précédent. Cela devient important lorsque certains éléments à contenu statique sont supposés être cachés immédiatement (pas de scintillement) jusqu'à ce que Javascript puisse les rendre plus dynamiques.
En bref, la technique que j'ai suggérée s'adresse à tous vos inconvénients 1-5, et je crois que c'est strictement mieux que d'utiliser <noscript>.
Dans un avenir proche, espérons-le, vous pourrez utiliser script css :
@media (scripting: none) {
/* styles for when JS is disabled */
}
l'ideea simple est en ce moment votre site Web peut adapter à aucune utilisation de javascript sur les appareils lents utilisant la balise noscript comme une entité pour le contenu entier de votre site Web ** (votre code HTML devrait être préparé à aucun javascript et tous les contrôles doivent également fonctionner si javascript est désactivé, les utilisateurs utilisant des contrôles html de base doivent être capables de faire tout ce qu'ils faisaient auparavant lorsque javascript était activé. Ainsi, <noscript></noscript> peut être le commutateur dynamique vers le même contenu d'une autre manière avec les mêmes résultats = résoudre le problème qui est la raison les utilisateurs ouvrent votre URL). ** Vous pouvez voir que peu importe que javascript soit ou non présent, les fonctionnalités du site Web peuvent être "les mêmes" dans tous les cas. js activé/désactivé.Sur les appareils lents en chinois, par exemple: le téléphone Samsung neo mini Cette méthode permet de gérer un site Web sans retard sur le trafic Internet faible .. essayez de lancer ce site Web à double fonctionnalité automatique si js est activé/désactivé
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE>noscript can change the Internet forever</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
$('noscript').replaceWith(function() {
return this.textContent || this.innerText;
});
$("p#javascripton").css("background-color", "yellow");
$("p").click(function(){
$(this).hide();
});
});
//-->
</SCRIPT>
<noscript>
<p>
Noscript's usage today can be logical for <a href="http://google.com/"><p id="javascripton">eg pc/laptop/high quality tablets usage the complete website with all features:images high resolution,javascript<br><h1>OR without javascript so no high resolutions images inserted with a jquery automated script generated from some php+javascript scripts so have usage for 80% mobile application cause almost are from China ,so low quality products=low cpu,low ram :IN THIS CASE SOMEONE CAN THINK TO SWITCH HIS PHONE TO NO JAVASCRIPT USAGE SO IF ANY PROGRAMMER CAN ADAPT AN ENTIRELY APPLICATION TO THE METHOD I USED IN THIS EXAMPLE AUTOMATED HIS BROWSER IS ADAPT FOR ANY RANDOM ACTION ABOUT THE USER CHOISE(YOU UNDERSTAND "TO USE OR NOT JAVASCRIPT") SO HIS CHINESE PHONE CAN BE APROXIMATELLY APROACH LIKE QUALITY OF SPEED EXECUTION THE OTHERS PC/LAPTOPS/TABLETS QUALITY PRODUCTS.<BR><BR>This stupid example is the best example how no script tag can change the quality of services on this planet ,boost the speed of the internet connection and stops unnecessary use of A LOT OF INTERNET TRAFFIC on slow devices..a simple tag can change the entirely dynamic of programmer's views so entirely Planet's beneficts</h1><p></a> <br>
run this code in two instances :<br>with browser javascript enable <br>and without(browser's javascript disable or eg a firefox plugin noscript states on/off)
</p>
</noscript>
</BODY></HTML>
et pour en dire plus à ce sujet .. right noscript a été inventé pour fonctionner comme un déclencheur lorsque js est désactivé, mais vous pouvez contourner cette fonctionnalité pour changer le cours de la fonctionnalité Internet sur comment il est, modifier sa dynamique ....
Je crée une hauteur complète, toute la largeur, la position: div fixe dans toutes les pages avec un identifiant.
<div id='noscript_div' style='position:fixed;z-index:20000000;height:100%;width:100%;line-height:100%;'>enable JS buddy</div>
$('#noscript_div').hide();
$(document).ready(function(event){
});
Je ne suis pas un expert . Cela a fonctionné pour moi . Je suis désolé mais, ce cas ne conviendra que si vous voulez que l'utilisateur ait son javascript activé toujours
L'élément "noscript" n'est pas pris en charge en XML ou en polyglotte XHTML5, il n'est donc pas recommandé par le W3C.
Je n'aime pas non plus l'idée que chaque page commence par une div visualisable sans script qui est ensuite masquée par un tour de cirque javascript sur chaque page d'un site Web. Dépendances de scripts dangereuses et plus nombreuses qui pourraient échouer ou causer des ravages si elles étaient modifiées par un développeur ultérieur.
Une meilleure stratégie consiste à concevoir votre site avec une conception HTML de base englobant tout le contenu scripté intérieur afin que l'utilisateur voie au moins une conception de page avec un en-tête et un emplacement où le contenu de base apparaîtrait. Si c'est vide, c'est assez évident, ils ne peuvent pas voir le contenu pour une raison. Je voudrais ensuite ajouter un petit message ou une icône d'information dans le pied de page en disant, si vous ne voyez pas de contenu, votre javascript est désactivé. Cela apparaît qu'ils voient ou non un contenu scripté. Cette solution est sans script.
En dernier recours, vous pouvez faire en sorte que ce message soit masqué par des scripts utilisant display: aucun au bas de chaque page Web.
Ce n'est pas aussi sexy que de fournir un contenu alternatif ou une boîte de message, mais dans le cas de sites Web angulaires lourds, vous devrez de toute façon créer une nouvelle page de contenu pour eux si le script devait être désactivé. Cette solution explique également l'absence de prise en charge de script dans un agent utilisateur par rapport à une prise en charge désactivée, et rend votre page Web compatible à 100% XML et HTML5 avec tous les agents d'utilisateur en évitant la balise noscript.
Comme toutes choses, utilisez le bon outil pour le travail.
Si vous utilisez Google Maps API, vous avez une image statique via une balise qui est remplacée par une carte JS dynamique. Google a récemment commencé à facturer tout, avec l'exemple ci-dessus, il vous en coûtera deux fois, une fois pour statique et une fois pour dynamique. La carte statique n'est pertinente que si JS est désactivé. Par conséquent, pour économiser en double paiement, il me semble que la meilleure solution consiste à envelopper le tag de la carte statique dans un tag.