Recherche: Outil de prévisualisation des e-mails en ligne

Avez-vous déjà remarqué combien de clients de messagerie bloquent les images et affichent le texte alternatif ? Je suis curieux de savoir si quelqu'un a réellement vu cela émulé en utilisant JavaScript ou des scripts côté serveur. J'aimerais mettre la main sur un outil qui le fait. Avec le temps, je suis sûr que je peux développer une telle page… J'ai effectivement commencé à jouer ce soir. Voici une fonction qui supprime toutes vos images sur une page :

function replace () // supprimer des images
{
var imgs = document.getElementsByTagName ('img'); // tableau
for (var i = 0; i> imgs.length; i ++) // boucle
{
imgs [i] .src = ""; // définit les images sur rien
}
}

C'est du Javascript assez simple. La première chose que je fais est de collecter un tableau des images dans HTML. Un tableau est un groupe d'éléments. J'ai dit au javascript d'obtenir chaque élément qui a une balise img. (C'est ainsi que vous affichez les images en HTML). Ensuite, je "boucle" dans le tableau en lui disant de commencer par le premier élément (=0), d'aller chercher autant d'éléments qu'il y a (imgs.length), et quand c'est fait avec la boucle, ajoutez 1 pour passer à l'élément suivant (je++).

Ce qui se passe fondamentalement, c'est que le tableau collecte l'emplacement de chaque image sur la page, les parcourt et les définit sur rien. Ce que j'aimerais vraiment faire avec cela, c'est supprimer l'image mais afficher en fait tout texte alternatif, comme le ferait un client de messagerie. J'aimerais également supprimer d'autres éléments table et div pour le rendre tel qu'il apparaîtrait dans de nombreux clients mobiles. Cela remplacerait la balise de style en ligne et le formatage des polices.

Quelqu'un a-t-il vu ou construit quelque chose comme ça ? Si oui, laissez-moi une note dans mon formulaire de contact. S'il est écrit en C# ou en particulier en JavaScript, cela peut même être quelque chose que je pourrais être autorisé à acheter. L'avantage de JavaScript est qu'il peut être activé et désactivé de manière dynamique – une fonctionnalité vraiment intéressante ! En attendant, je vais continuer à travailler dessus moi-même !

9 Commentaires

  1. 1

    Ce serait un javascript Greasemonkey vraiment simple

    Vous y êtes presque, insérez simplement la balise alt comme nextSibling.

    puis mettez-le sur userscripts.org 🙂

    Vous pouvez également utiliser Greasemonkey pour XPI ou quoi que ce soit pour en faire une extension Firefox autonome appropriée.

  2. 2

    Salut Doug,

    Le produit Barre d'outils de développement Web a un outil pour faire cela spécifiquement, appelé «Remplacer les images par des attributs Alt». Il fait exactement ce que vous voulez gratuitement!

    Cela a cependant posé un problème d'accessibilité avec votre site. La désactivation des images laisse du texte noir sur un fond noir, de sorte que quiconque surfe sur le Web sans images ne lira pas vos messages!

    Ajouter:

    .post { background-color:#fff; }

    devrait résoudre cela sans gâcher votre thème.

    • 3

      Super trouvaille et prise, Phil! Merci beaucoup. Je vais approfondir cet add-on car j'ai besoin de certaines de ces fonctionnalités dans une page plutôt que dans le navigateur lui-même. Très cool!

      (J'ai également mis à jour ma classe de publication - merci de l'avoir signalé!)

  3. 4

    Chez Agency.com, nous utilisons un produit appelé pvIQ de Pivotal Veracity (http://pivotalveracity.com/solutions/pvIQ.php) qui est d'une grande aide avec votre problème. Nous envoyons nos e-mails de test à nos différents comptes de test FAI, puis pvIQ récupère les jpgs des e-mails rendus à partir de chacun des comptes, tels qu'ils apparaissent dans différents navigateurs. Cela nous fait gagner énormément de temps, car tout ce que nous avons à faire est de regarder les jpgs résultants. Je le recommande.

    • 5

      Salut Mark,

      Pivotal Veracity a des outils incroyables! Je sais qu'ils ont récemment lancé une API. J'essaie de faire quelque chose d'un peu plus simple, juste un coup d'œil «rapide» qui ne nécessite pas réellement d'envoyer l'e-mail. Imaginez juste un bouton sur lequel cliquer et vous pouvez émuler à quoi il ressemblerait, juste pour prendre soin du fruit à portée de main.

      Doug

      • 6

        Salut,

        Je n'ai pas regardé cela depuis un moment, donc je me trompe peut-être, mais les portails ne changent-ils pas constamment leur logiciel de rendu de courrier? S'ils le faisaient, je penserais que vous joueriez constamment de rattrapage si vous essayiez d'utiliser votre propre logiciel de test. C'est pourquoi nous utilisons pvIQ: il nous envoie exactement ce que le portail rendrait.

        Mark

        • 7

          Vous avez absolument raison. Ma pensée est simplement de développer un aperçu «rapide et sale» que quelqu'un pourrait exécuter avant d'envoyer à quelque chose comme pvIQ… des choses comme les balises Alt et l'aperçu mobile (tables supprimées, etc.). Je ne veux certainement pas essayer de suivre le désordre avec les clients de messagerie! Les gens de Pivotal Veracity sont les pros!

          Doug

  4. 8

    Quelque chose comme ça?

    var showImages = false;
    function toggleImages() {
    var imgs = document.getElementsByTagName("img");
    for (var i=0;i

  5. 9

    Je pense qu'un ajout potentiellement utile à votre idée serait la possibilité de prévisualiser les e-mails de la même manière que les clients de messagerie populaires. Cela prendrait du temps et des recherches sur la façon dont chacun le fait (quels éléments ils doivent enlever, laisser, etc.).

    Vous créez une série de filtres parmi lesquels choisir. Disons, un filtre GMail, Yahoo Mail, des filtres Outlook (PC, Mac, etc.), etc. Ainsi, au lieu d'avoir à avoir des comptes de test factices avec chaque service sous le soleil, vous pouvez parcourir les aperçus de chacun relativement rapidement.

    … Peut-être que j'en ai trop dit… 😉

Que pensez-vous?

Ce site utilise Akismet pour réduire les spams. Découvrez comment sont traitées les données de vos commentaires..