Compter les liens HTML dans une page web donnée

Version imprimable

08/03/2015, 10h48
Chelmi Natroll

Compter les liens HTML dans une page web donnée

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.

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

Code:

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

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:

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">  </script> ). </body> </html>
et ça ne me retourne rien.
Qu'est ce que je fais mal. ?

09/03/2015, 09h08
sekaijin

Citation:

Envoyé par Chelmi Natroll

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

ça

Code:

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

getElementsByTagName

A+JYT
09/03/2015, 18h17
Chelmi Natroll

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:

console.log(nombre);

est sensé afficher le résultat ?

Encore merci de ton implication et de ta patience. :)

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:

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é.

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

Quand je compte mes caricatures avec

Code:

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:

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:

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 ?

09/03/2015, 23h23
lysandro

Rions un peu

Citation:

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é :)
09/03/2015, 23h46
SylvainPV

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.
10/03/2015, 01h04
Chelmi Natroll

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 ! :)
10/03/2015, 10h24
SylvainPV

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).