Savoir si Javascript est activé en Javascript/PHP

Décembre 2012

Comme vous le savez surement déjà, JavaScript est un langage de programmation exécuté côté client dans le navigateur web des visiteurs.

Étant donné que c'est exécuté sur le navigateur, cette fonctionnalité peut être désactivée dans les options du navigateur (par exemple sous Firefox c'est dans Outils > Options > Contenu > Activer Javascript).

Du coup ça peut poser des problèmes, car si votre site utilise beaucoup Javascript, il risque de ne pas fonctionner correctement sur un navigateur avec le javascript désactivé.

Donc ici nous allons voir une méthode simple permettant de gérer ce cas de figure.

Afficher un message d'avertissement quand Javascript est désactivé

L'idée est simple : nous allons faire ne sorte qu'un message d'avertissement s'affiche quand le JS n'est pas activé.

Pour cela, il suffit d'écrire ce message dans le code HTML, en l'englobant dans un élément qu'on va ensuite masquer en Javascript au chargement de la page. Ainsi quand javascript est activé, le message est masqué et les visiteurs ne le voient pas. Dans le cas contraire, le message reste affiché :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Détecter l'activation de Javascript</title>
	
	<script>
	window.onload = function(){
		element = document.getElementById('message_avertissement_javascript');
		element.parentNode.removeChild(element);
	}
	</script>
</head>
<body>
	<div id="message_avertissement_javascript">
		Attention, vous avez désactivé Javascript sur votre navigateur, le site risque de ne pas bien fonctionner
	</div>

	<h1>Lorem Ipsum</h1>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	Proin varius hendrerit adipiscing. Cras eu adipiscing turpis.</p>

	<p>Sed facilisis elit sit amet nibh lobortis cursus. Duis tincidunt lacus sed tortor tempor faucibus.</p>
</body>
</html>

Détecter l'activation de Javascript en PHP, côté serveur

L'affichage d'un message d'avertissement permet juste d'informer l'utilisateur, mais cela ne permet pas de réagir de façon intelligente, en fournissant une version spéciale sans Javascript de la page par exemple.

Pour faire cela, ont peut utiliser la balise html <noscript> qui n'est exécutée que lorsque javascript est désactivé.

Dans un tout autre contexte, cet article est très intéressant : saisie semi-automatique sur excel.

Par exemple on peut créer une redirection pour les visiteurs sans javascript :

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<noscript><meta http-equiv="refresh" content="0, URL=sans-javascript.html"></noscript>
	<title>Redirection quand Javascript est désactivé</title>
</head>
<body>
	<!-- ... -->
</body>
</html>

Du coup vous pouvez vous servir de cette astuce pour par exemple mettre à jour la session de l'utilisateur pour mémoriser que le JS est désactivé dans le script cible de la redirection.

Inversement, vous pouvez vous assurer que Javascript est activé à l'aide d'un tel script et d'une requête XHR (Ajax) : si l'utilisateur envoie la requête AJAX, c'est que Javascript fonctionne.

Allez donc jeter un oeil sur cette page : affiche retro space 1961.

Fil de lecture

0 commentaire