Compter les liens HTML dans une page web donnée

**Chelmi Natroll** · 08/03/2015, 10h48

Bonjour,

Tout d'abord, je ne suis pas développeur, je bidouille un peu d'HTML et CSS en autodidacte, mais je ne connais pas du tout le Javascript. Et là, j'aurai besoin d'intégrer un bout de code en Javascript dans une page web.

Je voudrais que ce script soit capable de compter les nombres de liens HTML dans une page web donnée (celle-ci: http://chelmimage.fr/kicswila/index/...ricatures.html) en comptant par exemple le nombre de fois qu'il y a la chaîne de caractère </a> dans la page. Et ensuite, je voudrais inscrire ce nombre dans une autre page web (celle-ci: http://www.kicswila.com/article-4260419.html).

Bref, concrètement, en résumé, je voudrais intégrer un compteur qui indique le nombre de Caricatures publiés sur mon site sur l'index de celui-ci (et ensuite faire la même chose pour les Autres clins d'œil en adaptant le code) car actuellement, c'est moi qui vait écrire manuellement (enfin au clavier ^^) en dur dans le code HTML de mon index, le nombre de Caricatures (et le nombre de d'Autres clins d'œil) à chaque fois que je publie un nouveau billet. Ça serait mois fastidieux si c'était automatique.

Merci d'avance pour votre aide.

**sekaijin** · 08/03/2015, 11h29

On te travaille pas sur la HTML mais sur le DOM
donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
aTags = document.getElementsByTagName('A');
nombre = 0;
for (var i= 0; i < aTags.length; i++) {
  if (null != aTags[i].href) //si on a un lien et pas une ancre
    nombre = nombre + 1;
}
console.log(nombre);

A+JYT

**Chelmi Natroll** · 08/03/2015, 21h20

Merci pour ta réponse.

Je vais surement poser des questions bêtes mais qu'est ce que le DOM, et comment j'intègre ce code dans ma page HTML.

J'ai essayé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
 
<body>
Caricatures (
<script type="text/javascript">
<!--
  aTags = document.getElementsByTagName('http://chelmimage.fr/kicswila/index/index-caricatures.html');
  nombre = 0;
  for (var i= 0; i < aTags.length; i++) {
	if (null != aTags[i].href) //si on a un lien et pas une ancre
	  nombre = nombre + 1;
  }
  console.log(nombre);
//-->
</script>
).
</body>
</html>

et ça ne me retourne rien.
Qu'est ce que je fais mal. ?

**sekaijin** · 09/03/2015, 09h08

Envoyé par Chelmi Natroll

et ça ne me retourne rien.
Qu'est ce que je fais mal. ?

ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByTagName('http://chelmimage.fr/kicswila/index/index-caricatures.html');

getElementsByTagName

A+JYT

**Chelmi Natroll** · 09/03/2015, 18h17

Ah désolé, comme quoi, il ne fait pas bon cogiter après un dimanche bien arrosé ^^... Comme je le disais, je ne suis pas du tout initié à la programmation et encore moins au javascript, et je n'avais pas capté que ton "A" était là pour indiquer qu'on recherche les balises <a></a>. Mais du coup où renseigne t'on l'adresse de la page Web dont on veut compter les liens, et comment fait on pour récupérer ce résultat et l'afficher dans une autre page web. Excuse moi de me répéter, mais je ne suis pas sûr d'avoir été clair dans mon premier billet...

Est ce que

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(nombre);

est sensé afficher le résultat ?

Encore merci de ton implication et de ta patience.

**SylvainPV** · 09/03/2015, 20h15

JavaScript s'exécute dans le contexte d'une seule page web, pas plusieurs. Une solution est de passer par les iframe :

dans le HTML de la page où tu veux afficher le résultat:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<p>Nombre de liens dans la page: <span id="resultat"></span></p>
<iframe id="pagetest" src="http://chelmimage.fr/kicswila/index/index-caricatures.html"></iframe>
<script>
var iframe = document.getElementById('pagetest');
iframe.onload = function compterLiens(){
   var liens = iframe.contentWindow.document.body.getElementsByTagName("a");
   document.getElementById("resultat").textContent = liens.length;
}
</script>

Dernière chose, il faut que la page où le résultat est affiché soit sur le même domaine que la page testée, afin de passer les contraintes de sécurité.

**Chelmi Natroll** · 09/03/2015, 21h21

Merci, cette solution m'a bien fait avancer, mais j'ai un autre problème.

Quand je compte mes caricatures avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<p>Caricatures: <span id="Nb_Car"></span></p>
<iframe id="caricatures" src="http://chelmimage.fr/kicswila/index/index-caricatures.html"></iframe>
<script>
var iframe = document.getElementById('caricatures');
iframe.onload = function compterCar(){
   var liens_car = iframe.contentWindow.document.body.getElementsByTagName("a");
   document.getElementById("Nb_Car").textContent = liens_car.length;
}
</script>

le résultat est juste.

Idem pour mes références:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<p>Reférences: <span id="Nb_Ref"></span></p>
<iframe id="references" src="http://chelmimage.fr/kicswila/index/index-references.html"></iframe>
<script>
var iframe = document.getElementById('references');
iframe.onload = function compterRef(){
   var liens_ref = iframe.contentWindow.document.body.getElementsByTagName("a");
   document.getElementById("Nb_Ref").textContent = liens_ref.length;
}
</script>

Le compte est bon aussi.

Mais quand je mets les deux ensembles:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<p>Caricatures: <span id="Nb_Car"></span></p>
<iframe id="caricatures" src="http://chelmimage.fr/kicswila/index/index-caricatures.html"></iframe>
<script>
var iframe = document.getElementById('caricatures');
iframe.onload = function compterCar(){
   var liens_car = iframe.contentWindow.document.body.getElementsByTagName("a");
   document.getElementById("Nb_Car").textContent = liens_car.length;
}
</script>
 
<p>Reférences: <span id="Nb_Ref"></span></p>
<iframe id="references" src="http://chelmimage.fr/kicswila/index/index-references.html"></iframe>
<script>
var iframe = document.getElementById('references');
iframe.onload = function compterRef(){
   var liens_ref = iframe.contentWindow.document.body.getElementsByTagName("a");
   document.getElementById("Nb_Ref").textContent = liens_ref.length;
}
</script>

Le premier compte devient faux et le second reste juste, et je ne comprends pas pourquoi. Pour éviter les d'interférences éventuelles, j'ai bien différencié les noms des fonctions et des variables, mais rien n'y fait...

Une solution ?

**lysandro** · 09/03/2015, 23h23

Rions un peu

Envoyé par Chelmi Natroll

Le premier compte devient faux et le second reste juste, et je ne comprends pas pourquoi

Nous non plus !

Bon. A part ça, à l'économie, il faudrait changer le nom des variables var iframe = en var iframe_car = et var iframe_ref = pour garder le même nommage. La raison est liée aux clotures et à la capture des variables.

Il existe aussi, pour compter les liens sans les compter justement, la collection document.links. Mais les collections pour une raison qui m'échappe sont rarement mentionnées. Voilà qui est corrigé

**SylvainPV** · 09/03/2015, 23h46

Oui ça vient des deux variables qui sont nommées pareilles. Le fait de les séparer en deux balises <script> ne change rien, elles sont toutes les deux déclarées en globale. Donc quand le premier iframe a chargé, la référence iframe dans le callback onload fait référence au second iframe. D'où le mic-mac.

**Chelmi Natroll** · 10/03/2015, 01h04

Merci à tous. Ça marche nickel avec vos corrections.

J'ai quand même du batailler un peu avec le pb de domaines différents qu'a soulevé SylvainPV , mais je m'en suis sorti par une pirouette en recréant une iframe dans une iframe (qui elles sont dans le même domaine), et en masquant la misère par un peu de mise en page. Pas très académique j'imagine mais ça fonctionne sous les dernières Chrome/ff/ie/opéra

Voilà le résultat: >>Index kiCswiLA?<<

Oui tous ça pour ses deux pauvres chiffres ! Pour vous, ça ne veut pas dire grand chose mais pour moi, ça veut dire beaucoup !! ^^

Merci beaucoup !

**SylvainPV** · 10/03/2015, 10h24

Pour conclure ce topic, ça vaut quand même le coup de préciser qu'on utilise généralement le serveur pour obtenir ce genre d'informations. Ici la méthode n'est pas très orthodoxe, elle est coûteuse pour le client car il doit télécharger la page en arrière-plan. Mais c'est la seule façon de faire pour un site statique (sans techno serveur ni base de données).

Compter les liens HTML dans une page web donnée

JavaScript

Discussions similaires

Partager

Partager