11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour ;
j'ai récupéré un script (désolé pour l'auteur, je ne sais plus où !) qui tente quelque peu de décourager les robots spameurs en protégeant les e-mails, tout en les laissant lisibles (ou compréhensibles) pour quelqu'un ayant désactivé javascript. Mais il est fait pour être intégré dans une page, et je souhaiterai le déplacer en feuille externe :

<ul>
<li><a href="#haut">| retour haut de page |</a></li>
<li><a href="index.htm">| accueil du site</a></li>
<li><a href="plan.htm">| plan du site |</a></li>
</ul>
<p>&copy;
Ma Pomme</p>
<script language="JavaScript" type="text/javascript">
<!--
var arobase="@";
var protocolecourriel="mailto:";
document.write('<a href="' + protocolecourriel + 'Mapome' + arobase + 'fournisseur.fr">@ webmestre</a>');
//-->
</script>

Merci d'avance Smiley rolleyes
Modifié par Macpom (02 May 2005 - 16:11)
Alors, allons y !

Un premier jet sans tester, je te garanti rien Smiley cligne


function hackSpamBot() {
var mailZone = document.getElementById('emailZone');
var arobase = "@";
var protocolcourriel = "mailto:";
/* là il te faut un élément dans ta source pour accueillir le futur lien, typiquement un élément avec un div pour y accéder via JS, après tu l'appelles comme tu veux et tu modifies en conséquence le code au dessus */

mailZone.appendChild(document.createTextNode('<a href="' + protocolcourriel + 'Tapomme' + arobase + 'fournisseur.fr">@ webmstre</a>'));
}

window.onload = hackSpamBot;


Voilà comme ça à l'arrache vite fait Smiley cligne

Donc dans ton HTML
un truc de ce style


<p id="emailZone"></p>
Oups,
j'étais tout content de ton intervention (je vais utiliser aussi la galerie photos...), mais... ben ça coince : la balise <p> ne permet pas de définir un lien, donc un élément cliquable, comme <a mailto:""></a>, et quand j'utilise <a mailto:"">, ça m'indique dans mon navigateur C://windows/Bureau/ (ce qui est logique) et ne répond donc pas à mon problème...
Merci quand même
(j'ai bien failli mettre résolu avant même d'essayer ! Smiley cligne )
Bon, fini pour ce soir, à demain sans doute !
Oups, attends... J'ai oublié d'appeler la feuille de script...
Modifié par Macpom (13 Apr 2005 - 17:48)
Bon,
je maintiens :
quelque soit la balise utilisée, il y a bien un affichage maintenant (donc le script est bien appelé... Smiley rolleyes ) mais il se fait en mode texte :
<a href="mailto:Tapomme@fournisseur.fr">@ webmstre</a>
et non cliquable...
Bon, cette fopis-ci, à demain pour de bon...
Ton anté penultieme post est pour le moins étrange, je met ça sur le compte de l'erreur d'interprétation Smiley lol parceque je n'ai rien de tout ça Smiley lol

En effet j'ai testé mon machin, et c'est plutôt inattendu !!!
Je m'attendais à une erreur, un bug, un machin, un bidule, mais non tout marche à peu près comme prévu !!! SAUF ...

J'ai capté pour quoi en écrivant Smiley lol c'est trop stupide ^^, je corrige Smiley cligne
Note à moi même :
Arreter de faire n'importe quoi avec le DOM ! Le DOM c'est propre et net et ça se manipule de la même façon Smiley lol

Wala le code résultant:

function hackSpamBot() {
var mailZone = document.getElementById('emailZone');
var arobase = "@";
var protocolcourriel = "mailto:";

mailZone.appendChild(document.createElement('a'));
mailZone.lastChild.setAttribute('href', protocolcourriel + 'Tapomme' + arobase + 'fournisseur.fr');
mailZone.lastChild.appendChild(document.createTextNode('@ webmestre'));
}

window.onload = hackSpamBot;


It work !
Salut Olivier,
... bon, suis vraiment une buse avec le javascript / ecmascript : je suis incapable de faire fonctionner ça dans ma page, malgré tous mes essais ; peux-tu me donner le html que tu as utilisé ? A partir de là, je pourrai éventuellement recomposer.
De plus, fatigue d'hier soir, il y a un truc que je n'ai pas bien précisé :
ce script ne doit pas fonctionner pour UNE seule adresse mail, mais pour toutes celle que je mets sur le site : la mienne, mais aussi celles de divers collaborateurs, pour celà que je pensais qu'une fonction pouvait peut-être convenir pour toutes les e-mails, et non la recopier à chaque fois, en modifiant les noms des boîtes et des fournisseurs, en plus que les scripts, c'est pas du contenu...
Merci tout de même Smiley prie
Pour la fonction, ça marche tout seul en principe.

Tu fous le script dans un fichier *.js, tu l'appelle avec

<script type="text/javascript" src="tonscript.js"></script>


Après dans ta page HTML, tu dois avoir un endroit où tu veux mettre ton adresse, tu fais donc une balise avec un id pour pouvoir y accéder (faut pas utiliser un lien, le lien est créé par le JS).
Là j'avais mis "emailZone" mais tu met ce que tu veux, tant que tu modifies dans le script (ligne2).

Et là ça roule tout seul.

Par contre, je comprend ton truc de toutes les adresses ...
Si j'ai bien compris, faut afficher plusieurs adresses ?

Un truc possible, serait de passer l'adresse en paramètre de la fonction, et de ressortir le lien qui va bien, ensuite t'appelle la fonction autant de fois que tu veux de liens

hackSpamBot('tapomme@tonfournisseur.fr');

Faudrait remanier la fonction légèrement.
mais je comprend pas bien ce que tu veux faire donc ... Smiley ohwell
La fonction est devenue

function hackSpamBot(adresse) {
var mailZone = document.getElementById('emailZone');
var arobase = "@";
var protocolcourriel = "mailto:";

var user = adresse.substring(0, adresse.indexOf('@'));
var domain = adresse.substring(adresse.indexOf('@')+1, adresse.length);

mailZone.appendChild(document.createElement('a'));
mailZone.lastChild.setAttribute('href', protocolcourriel + user + arobase + domain);
mailZone.lastChild.appendChild(document.createTextNode('@ webmestre'));
}

function init() {
	hackSpamBot('tapomme@pwet.com');
}

window.onload = init;


Si tu veux un exemple de page où ça marche :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<title>hack Spam Bot</title>
		<style type="text/css">

		</style>
		<script type="text/javascript">
function hackSpamBot(adresse) {
var mailZone = document.getElementById('emailZone');
var arobase = "@";
var protocolcourriel = "mailto:";

var user = adresse.substring(0, adresse.indexOf('@'));
var domain = adresse.substring(adresse.indexOf('@')+1, adresse.length);

mailZone.appendChild(document.createElement('a'));
mailZone.lastChild.setAttribute('href', protocolcourriel + user + arobase + domain);
mailZone.lastChild.appendChild(document.createTextNode('@ webmestre'));
}

function init() {
	hackSpamBot('tapomme@pwet.com');
}

window.onload = init;
		</script>
	</head>
			
	<body>
		<p id="emailZone"></p>
	</body>
</html>
Ok !!!! ça marche !
Je comprends pas pourquoi ça le faisait pas avant ! (Je découvre au passage que iE m'ouvre obstinément Outloock, alors que je n'ai pas configuré ce mail ! Passons).
L'avantage du <p> : on peut toujours mettre un texte d'identifiant mail pour ceux désactivant javascript...

Ensuite :
je crois que tu as bien compris le problème : que ce hack soit utilisable pour n'importe quelle adresse donnée sur mon site, et non juste la mienne : je tiens aussi à préserver les autres...
Il faudrait lister toutes les adresses mail sur la feuille de script ? ou une opération récupérant l'identité d'adresse et le fournisseur en variable réutilisable ?
En fait, ce ne serait plus les variables "@" et "mailto" qui seraient intéressantes, mais genre "nom" et "fournisseur" ?
edit 2 : euh, quand j'y regarde, ça reviendrait à écrire un autre hack, quoi...? Peut-être bien l'occasion d'apprendre, alors... C'est bientôt w.end, ça fera de l'occupation !
Modifié par Macpom (14 Apr 2005 - 17:52)
Pour ce qui est de nom et fournisseur, tu peux les extraire de l'adresse complète réelle.

Si tu les fous dans un un tableau, genre array, dans ton script, les bots iront pas les chercher là bas. Tu stockes donc tes adresses, et tu fais la fonction pour chacune.

Mais au final, tu veux afficher ensemble toutes les adresses ? Ou juste une comme ça de temps en temps par ci par là à ton bon vouloir ?
Nan parceque là c'est pas hyper fonctionnel, mais je vois pas ce que tu veux faire au final !
Modifié par Olivier (14 Apr 2005 - 17:57)
Bonjour Olivier,
j'ai une adresse qui revient sur toutes les pages : celle du webmestre.
J'ai des adresses occasionnelles, au cours d'un sujet, par exemple.
J'ai quelques listes d'adresse mail aussi...
Selon les pages (oui, c'est du gros site...).
Je pense donc qu'il faut récupérer l'identifiant et le fournisseur dans une chaîne de caractères, lisible pour ceux qui n'ont pas javascript, et que le script recombine l'adresse. C'est idiot ?
(genre: courriel:"mapom"chez"larbre.fr" / courriel:"moncousin"chez"lui.fr"... et récupérer mapom, larbre.fr, moncousin.fr, pour que ça repasse à chaque fois dans la même fonction qui recombine l'adresse mail ?)
Suis-je plus clair ?
Ahh okay, à ce moment là, un truc possible, ça serait d'encadrer toutes tes adresses mails du type mapom_CHEZ_larbre_POINT_fr (ou .fr) dans un span avec une class.

Donc un truc du style à chaque adresse email que tu veux encoder


<span class="email">mapom_CHEZ_larbre_POINT_fr</span>


Et ensuite, je te ferais la petite fonction qui va bien et qui remplace _CHEZ_ par @ et _POINT_ par ., ça sera même plus simple que la fonction actuelle.
Vala la nouvelle fonction :

function hackSpamBot2() {
	var emails = document.getElementsByTagName('a');
	var arobase = '@';
	for (var i = 0 ; i < emails.length ; i++) {
		if (emails[ i].getAttribute('class') == 'hackSpamBot') {
			var mailtoMan = emails[ i].href.substring(0,emails[ i].href.indexOf('_CHEZ_'));
			var mailtoDomain = emails[ i].href.substring(emails[ i].href.indexOf('_CHEZ_')+6,emails[ i].href.indexOf('_POINT_'));
			var mailtoDomainExt = emails[ i].href.substring(emails[ i].href.indexOf('_POINT_')+7,emails[ i].href.length);
			emails[ i].href = mailtoMan + arobase + mailtoDomain + '.' + mailtoDomainExt;
		}
	}
}


Et ça s'utilise comme ça :


<a class="hackSpamBot" href="mailto:mapom_CHEZ_bla_POINT_com">bla bli blu</a>


(Faudra pas oublier de remplacer [ i] par l'équivalent sans espace, c'est à cause du BBcode qu'il y en a un là.
Modifié par Olivier (15 Apr 2005 - 17:37)
Bonjour ;
j'aurai tant apprécié mettre un "résolu"... Smiley smile
mais : ça déclenche bien l'e-mail (grace au "mailto:") mais je n'obtiens que l'adresse donnée dans le href : mapom_CHEZ_bla_POINT_com, et non une adresse conforme...
(j'ai bien "resserré les [ i])
Modifié par Macpom (26 Apr 2005 - 16:31)
Bonjour,
et Grand Merci Olivier : j'ai réussi à faire marcher en copiant le code à partir du lien que tu m'as mis. Je pense savoir d'où vient mon problème, par rapport à mon essai d'aujourd'hui :
ça marche PARFAITEMENT bien, à partir du tandem Mozilla (Firefox / Thunderbird...) et très mal avec iE : la boite se déclenche bien (fonction "mailto:" mais l'adresse qui apparaît reste "trucmuche_CHEZ_machin_POINT_fr" ce qui reste très corrigeable.
Igor m'a aussi proposé une deuxième solution, que je mets ici, pour ceux que ça peut intéresser : codage en héxadécimal, soit sur le site, soit par une fonction Php, sur Neokraft.net :
http://www.neokraft.net/sottises/mailencoder/
Et je mets un petit "Résolu" avec grand plaisir et tous mes remerciements !
Modifié par Macpom (02 May 2005 - 15:29)