Partage

Une fonction pour tester si le navigateur active ou pas JS

Ca existe ?

Sujet résolu

28 octobre 2008 à 20:11:15

Bonjour,

je voudrais savoir s'il existe une fonction qui vérifie si le navigateur active ou pas le Javascript.

Merci !

xavierh.

Merwin

28 octobre 2008 à 20:19:38

:D.
Simple question de logique...
Tu as la balise noscript qui affiche le message contenu si le client n'a pas javascript activé.

Xavierh

28 octobre 2008 à 22:43:19

Merci beaucoup

Mais encore une autre question. Je voudrais refuser l'accès à la page si le javascript et désactivé. Avec noscript je ne peux pas car le reste de la page est affichée. Il faudrait faire tout en javascript alors. Mais existe t'il une variable par exemple pour pouvoir faire :

<?php
if(la variable)
{ ?>

mon site

<?php
} ?>

Xavierh

2 novembre 2008 à 7:36:36

Timot

2 novembre 2008 à 10:08:58

Beh tu fais une redirection en javascript vers la page qui contient ton site avec du js.
Et dans la balise noscript, tu écris qu'il faut nécessairement javascript pour utiliser ce script

Elias le Vert

2 novembre 2008 à 11:56:48

En règle générale, il y a deux façons d'intégrer du javascript avec une alternative noscript :
1. Lorsqu'il s'agit de lien, tu mets un lien "noscript" en href, que tu fais ensuite "sauter" en javascript avec un return false, en appelant une fonction ou en envoyant sur une page différente :

<a href="pagenoscript.php" onClick="maFonction(); return false;">Lien</a>
<a href="pagenoscript.php" onClick="document.location='pagejs.php'; return false;">Lien</a>

C'est le moyen le plus propre de faire un site fonctionnel avec ET sans javascript, connu sous le nom de "enrichissement progressif" (tu fais d'abord un script qui fonctionne sans javascript, puis tu l'agrémentes en remplaçant le fonctionnement normal par un fonctionnement utilisant javascript).

2. Méthode plus complexe utilisée lorsqu'il y a des éléments qui ne doivent être affichés que pour le javascript (du texte, des images, des div...) :
- Tu mets sur ces éléments une class CSS (par exemple "jsactif")
- Dans ta feuille de style, tu mets les éléments de cette class en display none :

.jsactif{
	display: none;
}

Ainsi, ces éléments ne sont pas affichés si l'utilisateur a désactivé javascript
- Ensuite, il va falloir les afficher. J'ai créé une petite fonction pour cela :

function displayJsElements(parent){
	parent = (parent ? parent : document.body);
	var nodes = parent.childNodes;
	for(var i=0; i<nodes.length; i++){
		if(nodes[i].tagName){					
			//On supprime l'éventuelle présence de la class "jsactif" sur l'élément
			if(nodes[i].className){
				var class_list = nodes[i].className.split(' ');
				nodes[i].className = '';
				for(var j=0; j<class_list.length; j++){
					if(class_list[j] != 'jsactif'){
						nodes[i].className += class_list[j];
					}
				}
			}
			displayJsElements(nodes[i]);
		}
	}
}

Ce que fait cette fonction : elle parcourt tous les éléments de la page et enlève la class "jsactif" à ceux qui l'avaient, de façon à ce qu'ils ne soient plus masqués. La fonction doit être donc simplement appelée sans aucun paramètre en onLoad sur le body :

<body onLoad="displayJsElements();">

Note : si pour une raison ou pour une autre tu ne pouvais pas modifier le onLoad du body, tu peux aussi mettre ceci tout au fond de ta page :

<script language="javascript" content="text/javascript">
	displayJsElements();
</script>

De cette façon, tu peux avoir sur ta page certains éléments qui ne seront vus que par les utilisateurs ne possédant pas javascript (en utilisant la balise noscript), et d'autres éléments qui ne seront vus que si l'utilisateur a activé javascript (ceux possédant la class jsactif), et ceci de façon extrêmement simple.
Exemple :

<div class="jsactif">Cette div n'est affichée que si l'utilisateur a activé javascript</div>
<noscript><div>Cette div n'est affichée que si l'utilisateur a désactivé javascript</div></noscript>

Enfin, pour le fun, j'ai fait une fonction PHP qui teste l'activation ou non du javascript, mais c'est archi-bourrin

<?php
function isJsActif(){
	if(!isset($_GET['jsactif'])){
		echo '<script language="javascript">';
		echo '	document.location += \''.($_SERVER['QUERY_STRING'] ? '&' : '?').'jsactif\';';
		echo '</script>';
		return false;
	}
	else{
		return true;
	}
}

$jsactif = isJsActif();
if($jsactif){
	echo 'Javascript est activé';
}
else{
	echo 'Javascript est désactivé';
}
?>

Xavierh

4 novembre 2008 à 9:43:29

Merci beaucoup pour tout ces codes. Je voudrais que ceux qui désactive le javascript n'aient pas accès au site.

Avec ta dernière méthode (surement celle que je vais utiliser) comment je fais pour faire passer la variable par un get ? Je ne connais que les formulaires pour faire celà.

Merci.

angelus76

4 novembre 2008 à 10:19:53

salut
voila ce qui pourrais etre fait aussi

<!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>Document sans nom</title>
<script type="text/javascript">
URL = "page.php";
var xhr=null;

function OpenPage() {
        if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
        else if (window.ActiveXObject) xhr = new ActiveXObject('Microsoft.XMLHTTP');
        else alert('JavaScript : votre navigateur ne supporte pas les objets XMLHttpRequest...');
        xhr.open('POST',URL,true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange = ajaxReponse;
        xhr.send("Js=ok");
}

function ajaxReponse() {
        if (xhr.readyState == 4) {
                document.getElementById("PageAff",true).innerHTML=xhr.responseText;
			    document.getElementById("TestJs").style.display = "none";
        }
}
OpenPage();
</script>
</head>

<body>
<div id="TestJs">Vous devez Activé Javascript sur votre navigateur pour avoir accés a cette page.</div>
<div id="PageAff"></div>
</body>
</html>

Explication :
si on est logique , si javascript est desactiver alor les fonction javascript ne sont pas executer.

donc voila comment agie le script que je vien de te proposé.
si Js activé , il fait apelle a la page PHP a afficher en lui envoyent un parametre en POST ici le parametre envoyer est Js=ok ;
sur la page PHP que tu apelle tu fait une condition pour verifier que $_POST["Js"] existe et si il est egale a " ok ",
si $_POST["Js"] existe bien et que c'est == a " ok " alor tu inclue ta page
sinon tu inclue une autre page ou tu fait apparaitre un message genre " Activé javascript " ou .....
Sur la page principale , si tous est fonctionelle ( javascript + condition dans php ) alor il afficheras la page dans la div
<div id="PageAff"></div>
et le script ce chargera de cacher lceci de la div TestJs
Vous devez Activé Javascript sur votre navigateur pour avoir accés a cette page.

Maintenant si javascript n'est pas activé , alor sa ne ferras pas apelle a la page PHP
et affichera le message qui ce trouve dans la Div TestJs

j'espere etre clair

Talus

4 novembre 2008 à 12:06:42

Et pour les pauvres navigateurs qui n'ont pas AJaX, qu'en fais tu ?

Faut arreter de tartiner de l'AJaX partout... Comme disait je sais plus qui, il faut savoir utiliser l'AJaX avec parcimonie, de sortes à ce que sa désactivation ne gène nullement la navigation !

Ou encore, comme disait yöm à un moment :

Citation : signature de yöm

AJAX est un produit vaiselle, en tant que tel il doit donc rester dans l'évier. Si un quelconque programmateur a cherché à l'utiliser en tant que "nouveau" langage de programmation c'est pour son propre confort, pas le votre.

Et je trouve la solution du noscript bien plus propre, ceci dit.

Mon profil Github - Zeste de Savoir, pour la beauté du zeste

angelus76

4 novembre 2008 à 13:52:23

Talus c'est la 2° foix que tu me reprend pour ne rien dire

meme IE6 supporte ajax
mtn si tu est toujour sur Windows 3.1 sache qu'il faut vivre avec sont temp
de meme pour les mise a jours des navigateur, il il y en as c'est bien pour une raison

mtn c'ete une autre solution que j'apporté.

en ce qui concerne l'ajax ,
je prefere fair un refresh avec ajax car quand meme plus discret a la navgation
( voir le loader de page charger tout le temp sa me gonfle et sur IE vive le click de refresh )

de plus je trouve un peux stupid pour ma part de desactivé Javascript sur un navigateur
sa donne quoi ? , gonflé les devellopeur a trouver des alternative au dynamisme de leur site ?
et je ne parlle pas uniquement pour ajax quand je dit sa mais de javascript au complet.

c'est un peux comme dire , ne fait pas de flash car faut penssé a ceux qui n'installe pas le plug de flash
voila a bon entendeur

Elias le Vert

4 novembre 2008 à 13:58:48

Hmm... oui et non, il faut vivre avec son temps, mais justement : nous allons de plus en plus vers des navigateurs très différents, des formats d'écrans divers et des lectures du code exotiques, en raison de la navigation sur le web qui se fait de façon de plus en plus variée : téléphones portables, iphones, consoles... on peut de moins en moins considérer que les gens n'ont qu'à utiliser IE7 ou Firefox et que les résolutions plus basses que 1240px peuvent être considérées comme inexistantes. En terme de standardisation des conditions de navigation, nous faisons un vrai retour en arrière

C'est cela qui rend l'utilisation d'une alternative noscript propre très importante.

aenario

4 novembre 2008 à 15:34:04

Citation : Talus

Et pour les pauvres navigateurs qui n'ont pas AJaX, qu'en fais tu ?

J'ai un doute la, tu sais de quoi tu parle et tu fais partie de ces ouf qui veulent la compatibilité avec des navigateurs qui n'existe pas mais qui pourraient ou auraient pu exister ou alors t'y connais juste rien ?

AJAX c'est du Javascript
AJAX c'est chiant à mettre en place (surtout si on respecte la compatibilité noJS)
AJAX c'est vachement plus agréable à naviguer quand c'est bien fait : pour preuve, livemail et Gmail

En l'occurence, le problème ne se pose pas :
Tu envoie l'utilisateut vers ta page SANS JS qui ne contient que le javascript nécessaire à une redirection vers la page AVEC JS). Tu peux également en profiter pour vérifier que certaines fonction sont active (par exemple XHR pour faire plaisir à Talus

)

Pas besoin d'AJAX, ni de noscript, transparent pour l'utilisateur

Elias le Vert

4 novembre 2008 à 16:44:29

Cela, c'est la méthode gros bourrin qui implique de faire des pages uniquement pour JS, et d'autres uniquement sans JS (ou accessoirement envoyer balader les utilisateurs n'ayant pas javascript :-/). Pas terrible terrible, c'est quand même bien plus sympa et accessible de faire quelque chose qui tourne sur les deux, et dans ce cas, faire toutes les pages en double, non merci. Mieux vaut arriver à faire des pages communes dans les deux cas pour la plus grande part, et user du noscript et du display none lorsqu'il faut vraiment afficher un élément que dans un cas.

KorangaR

4 novembre 2008 à 18:00:20

Noscript (qui n'est pas compatible avec du pur XHTML) peut être évité dans bien des cas de figures, il suffit simplement d'ajouter (ou de supprimer) le contenu et les balises via Javascript. Pareil pour la solution avec les display:none qui peut poser bien des problèmes pour les navigateurs qui ne supportent pas CSS.

Savageman

4 novembre 2008 à 18:38:38

De nos jours on se bat pour un web accessible ! Un site ne fonctionnant pas sans javascript n'est PAS accessible et donc n'est PAS d'avenir...
Quelqu'un donnait l'exemple de Gmail, mais Gmail fonctionne également très bien sans javascript...

MailClark: your team’s bot for external communications : send and receive emails, Twitter & Facebook messages without leaving Slack ❤️

Talus

4 novembre 2008 à 18:39:23

KorangaR > Pour les CSS, là c'est un peu gros...

aenario > Pour le fait de la non connaissance d'AJaX, si ca m'est concerné, oui, j'incluais "pas de JS", ou un truc du genre, si tu préfères. Oui, certes, c'est plus agréable de naviguer avec AJaX, mais faut savoir le faire sans, aussi... GMail (pas vu pour Live, mais il me semble que c'st pareil...), il y a une alternative full xHTML.

Pour le coup du flash... Jai déjà vu des personnes qui se refusaient d'installer flash, justement (me semble même que c'était sur le SdZ). Faut vivre avec son temps, certes... Mais faut aussi s'ouvrir au maximum de visiteurs. Et, JS ou pas JS, Flash ou pas Flash, faut quand même les prendre en compte, et ne pas gêner la navigation de ces chieurs ceux qui font le choix de n'avoir pas ces fioritures en plus. Je sais pas trop si j'ai été suffisement clair, là par contre :s. 'Fin bref.

(EDIT > Grillé par Savageman pour le js de gmail)

Mon profil Github - Zeste de Savoir, pour la beauté du zeste

angelus76

6 novembre 2008 à 13:41:55

Pour WLM il vienne de changer leur interface
et a priorie si on a pas javascript activé , la navigation est HS

Talus

6 novembre 2008 à 16:37:30

J'ai désactivé le JS, et ca marche niquel chez moi.

Mon profil Github - Zeste de Savoir, pour la beauté du zeste

angelus76

6 novembre 2008 à 20:29:27

ha j'ais pas precisé mon navigateur
FF

moi quand je desactive Js, ba plus rien marche sur le webmail de wlm

Talus

6 novembre 2008 à 21:00:39

Pour WML, il me semble que y'a une version noJS, chercher un peu :-°.

EDIT > Je n'ai rien dit. Mais doit forcemment y'avoir un truc noJS :-°.

Mon profil Github - Zeste de Savoir, pour la beauté du zeste

Xavierh

7 novembre 2008 à 13:48:59

Justement !
Je veux que mon site ne soit PAS accessible a ceux qui désactive le javascript. Et pour ceux qui disent que mon site n'a aucun avenir, eh bien je M'EN FICHE ! C'est mon problème et sur ce point j'aimerais bien qu'on soit d'accord.

Merci quand même

Talus

7 novembre 2008 à 14:24:17

Ben faire une page d'index bidon sur laquelle y'a une instruction js qui redirige est la meilleure solution...

Mon profil Github - Zeste de Savoir, pour la beauté du zeste

angelus76

7 novembre 2008 à 14:41:16

bon cette foix ci je vais soutennir Talus

il est vrais que le Test de Js pourrais ce fair avec une simple fonction javascript qui redirige sur la page a afficher
comme sa si javascript n'est pas activé il ne voie que le contenue du body
sinon il est imediatement rediriger sur la page a afficher

Xavierh

7 novembre 2008 à 20:44:55

D'accord
Et cette redirection comment on la fait ? C'est ce qui a été dit plus c'est ca ?

Talus

7 novembre 2008 à 20:50:28

Oui, sans l'AJaX... Juste un script javascript du type window.location.replace() (ou un truc du genre, je ne connaispas bien l'objet window :p), avec une balise noscript pour dire "js needed"...

Mon profil Github - Zeste de Savoir, pour la beauté du zeste

TheBidi

9 novembre 2008 à 23:03:39

Tu peux également envisager un body.nojs { display: none; } avec une balise body du genre <body class="nojs" onload="javascript: isJsEnabled ();"> , avec une fonction JS isJsEnabled qui efface le style du body. Au final, on n'affiche rien si on n'a pas JS, et sinon, bin on affiche. Enfin, tout dépend de ce que tu veux faire ; en fonction de ça, bin il ne te reste plus qu'à choisir la méthode que tu judes la plus appropriée

Xavierh

10 novembre 2008 à 20:50:18

Merci beaucoup. Résolu