11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Tester la langue courante

Bonjour
J'ai un script "diapo(imageName)" qui est appelé plusieurs fois à l'intérieur d'une page.
Il interprète le nom de l'image selon les standards que nous avons donnés au noms de fichiers de ce site, et il génère finalement un code html <figure>...</figure> qui contient l'image, un texte déduit du nom de l'image, un lien vers une version différente de l'image, et différentes joyeusetés du même ordre.

Question: le site étant bilingue, j'aimerais que le texte déduit du nom de fichier soit adapté selon qu'il s'agit d'un "contexte" anglais ou français.

Le "contexte" peut être
- le langage de la page, défini dans la balise <html lang="xx">
- le langage de la balise dans laquelle est appelé le script, par exemple <span lang="xx">...</span>
Question: comment récupérer en JS la valeur courante du langage pour générer le bon texte?

Merci de votre aide
Modifié par PapyJP (13 Jan 2016 - 11:11)
Bonjour,

en javascript, tu peux récupérer l'attribut lang de la balise html.

document.getElementsByTagName("HTML")[0].getAttribute("lang")


J'ai l'impression que le problème est pris à l'envers ... Habituellement, on connaît la langue et on en déduit des textes et éventuellement des noms d'images ou d'oiseaux.
loicbcn a écrit :
en javascript, tu peux récupérer l'attribut lang de la balise html.

document.getElementsByTagName("HTML")[0].getAttribute("lang")

Pour la balise <html> ,c'est déjà fait, mais le problème est dans l'autre sens.
En fait il faudrait pouvoir récupérer la balise qui englobe l'appel au script et remonter l'arborescence jusqu'à trouver une balise qui contient un attribut "lang".
La question devient "trouver l'élément dom qui contient l'appel du script", et ça je ne vois pas comment faire.
loicbcn a écrit :
J'ai l'impression que le problème est pris à l'envers ... Habituellement, on connaît la langue et on en déduit des textes et éventuellement des noms d'images ou d'oiseaux.

Oui, mais ce que je cherche à faire c'est justement de retrouver cette langue pour en déduire les textes.
Je pourrais bien sûr ajouter un paramètre d'appel au script, mais c'est ce que j'aimerais éviter.
Modifié par PapyJP (13 Jan 2016 - 12:35)
Si la question est, dans quel élément <script> Est-ce que je me trouve en ce moment, ce n'est pas possible.
ET même si c'était possible, ce n'est pas très prudent d'agir ou même simplement de parcourirr le DOM alors qu'il n'est pas complètement chargé.

Par contre, étant donné un élément de départ, ce n'est pas très compliqué de remonter jusqu'au premier élément englobant possédant un attribut lang. C'est faisable avec quelque chose comme ceci :


function getNearestLang (elem) {
return elem && (elem.getAttribute('lang') || getNearestLang(elem.parentNode));
}

Modifié par QuentinC (13 Jan 2016 - 14:56)
Modérateur
QuentinC a écrit :
Si la question est, dans quel élément &lt;script&gt; Est-ce que je me trouve en ce moment, ce n'est pas possible.


Et pourtant ... 


<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<script>
function getLang()
{
	var e=document.currentScript,lang;
	while (e.parentNode&&!e.lang) e=e.parentNode;
	if (e.lang) lang=e.lang;
	else lang="";
	return lang;
}
</script>
</head>
<body>
<p lang="fr">
<script>
document.write(getLang());
</script>
</p>
<p lang="en">
<script>
document.write(getLang());
</script>
</p>
</body>
</html>

Amicalement,
Modérateur
PapyJP a écrit :
Question: comment récupérer en JS la valeur courante du langage pour générer le bon texte?


Bien que ce soit possible en javascript, il me semble préférable ici de faire ça au niveau du serveur (via php si c'est ce que tu utilises) plutôt qu'en javascript au niveau du client. Ce sera probablement mieux référencé par les moteurs de recherches.

Amicalement,
Modérateur
QuentinC a écrit :
… ce n'est pas très prudent d'agir ou même simplement de parcourir le DOM alors qu'il n'est pas complètement chargé.


Totalement d'accord avec ça. C'est un nid à bugs.

Amicalement,
Merci à tous pour vos réponse.

Dans ce site là, pas de php, donc pas possible.

Peut être pourrais-je faire un script au chargement de la page qui parcourt les balises générées par diapo et fait l'ajustement, du genre:
1) dans la balise générée mettre le texte sous le forme de 
<span data-fr="texte français" data-en="text in English"></span>

2) au chargement de la page, rechercher toutes les balises <span> et mettre le bon texte en remontant l'arborescence de chacune jusqu'à trouver une balise qui a un paramètre lang="xx"?

Votre avis sur cette solution?
Modérateur
Bonjour,

Ta fonction diapo peut utiliser la fonction getLang() que j'ai donné dans ma réponse précédente sans qu'il soit nécessaire dans ton cas de bâtir une usine à gaz en fin de script, et ce qui simplifie aussi le contenu généré par diapo().

Mais si tu veux éviter de parcourir le dom en construction (et donc si tu ne veux pas de la fonction getLang()), et si tu es prêt à accepter que diapo() génère ses contenus dans toutes les langues, le choix de ce qui est à afficher effectivement n'étant fait qu'après (c'est ce que semble suggérer ta dernière réponse), alors tu peux dans ta fonction diapo() te contenter d'ajouter une classe au conteneur de chaque contenu indiquant la langue de ce contenu. Il n'est alors pas nécessaire d'avoir un script en fin de page qui scannerait tout le dom pour cacher/monter les langues en fonction de la langue de leur conteneur : de simples règles css suffisent. Exemple :
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<style>
[lang="fr"] figure:not(.inFr) {display:none;}
[lang="en"] figure:not(.inEn) {display:none;}
</style>
<script>
function diapo(img)
{
	// génération d'une diapo pour l'image img en français
	document.write("<figure class=\"inFr\">");
	document.write("<span>Une belle photo appelée "+img+"</span>...");
	document.write("</figure>");
	// génération d'une diapo pour l'image img en anglais
	document.write("<figure class=\"inEn\">");
	document.write("<span>A nice picture called "+img+"</span>...");
	document.write("</figure>");
}
</script>
</head>
<body>
<div lang="fr">
<script>
diapo("toto.png");
</script>
</div>
<div lang="en">
<script>
diapo("tata.png");
</script>
</div>
<div lang="en">
<script>
diapo("tutu.png");
</script>
</div>
</body>
</html>


Amicalement,
Modifié par parsimonhi (13 Jan 2016 - 22:09)
Bonjour et merci
Il y a déjà dans mes pages des scans de dom en construction, mais je m'arrange pour ne travailler que sur des balises fermées avant l'appel. Ici il s'agit d travailler sur des balises non fermées, ce qui est plus délicat.
Je vais utiliser getLang et si je rencontre un problème avec un navigateur je prendrai une solution à base de CSS, comme proposé par parsimonhi.
Euh!!!
document.currentScript n'est pas supporté par beaucoup de navigateurs, semble-t-il , et en particulier par IE.
Dommage, c'était exactement ce que je cherchais!
Modifié par PapyJP (14 Jan 2016 - 10:36)
Modérateur
Bonjour,

Quelle misère, même en 2016, ie continue de nous pourrir la vie !

Je n'avais pas pensé à vérifier. Mea culpa !

Essaie ça alors : 

function getLang()
{
	var scripts=document.getElementsByTagName('script');
	var e=scripts[scripts.length - 1],lang;
	while (e.parentNode&&!e.lang) e=e.parentNode;
	if (e.lang) lang=e.lang;
	else lang="";
	return lang;
}
Amicalement,
Modifié par parsimonhi (14 Jan 2016 - 10:48)
parsimonhi a écrit :
Bonjour,

Quelle misère, même en 2016, ie continue de nous pourrir la vie !

Je n'avais pas pensé à vérifier. Mea culpa !

Essaie ça alors : 

function getLang()
{
	var scripts=document.getElementsByTagName('script');
	var e=scripts[scripts.length - 1],lang;
	while (e.parentNode && !e.lang) e = e.parentNode;
	if (e.lang) lang = e.lang;
	else lang="";
	return lang;
}
Amicalement,

Oui, c'est une excellente idée. J'espère qu'il n'y a pas un moteur d'interprétation JS qui coinsce.
Sujet clos
Aller à