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 cette émulation 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 pourrai développer une telle page… J'ai 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 rassembler un tableau d'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 '' le tableau en lui disant de commencer par le premier élément (= 0), je cherche autant d'éléments qu'il y a (imgs.length), et quand c'est fait avec la boucle, ajoute 1 pour passer à l'élément suivant (i ++).

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

Quelqu'un a-t-il vu ou construit quelque chose comme ça? Si tel est le cas, envoyez-moi une note dans mon formulaire de contact. S'il est écrit en C # ou surtout en JavaScript, il se peut même que je puisse ê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 à y travailler moi-même!

9 Commentaires

  1. 1

    Ce serait un javascript Greasemonkey très simple

    Vous y êtes presque, insérez simplement la balise alt en tant que nextSibling.

    puis mettez-le sur userscripts.org 🙂

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

  2. 2

    Salut Doug,

    Le Barre d'outils de développement Web a un outil pour faire cela spécifiquement, appelé "Remplacer les images par des attributs alternatifs". 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 toute personne surfant sur le Web sans images ne lira pas vos messages !

    Ajouter:

    .post { background-color:#fff; }

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

    • 3

      Bonne trouvaille et prise, Phil ! Merci beaucoup. Je vais approfondir cet add-on un peu plus 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 ISP, puis pvIQ récupère les jpg des e-mails rendus de chacun des comptes, tels qu'ils apparaîtraient dans différents navigateurs. Cela nous fait gagner énormément de temps, car tout ce que nous avons à faire est de regarder les jpg résultants. Je le recommanderais.

    • 5

      Salut Mark,

      Pivotal Veracity dispose d'outils incroyables ! Je sais qu'ils ont également 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 d'envoyer l'e-mail. Imaginez juste un bouton sur lequel cliquer et vous pouvez imiter son apparence, juste pour prendre soin des fruits à portée de main.

      Doug

      • 6

        Hi,

        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 seriez constamment en train de rattraper votre retard 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 tout à fait raison. Ma pensée est simplement de développer un aperçu "rapide et sale" que quelqu'un pourrait exécuter avant de l'envoyer à quelque chose comme pvIQ… des choses comme les balises Alt et la prévisualisation mobile (tableaux supprimés, 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 en la matière !

          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 enlever, laisser, etc.).

    Vous créez une série de filtres parmi lesquels choisir. Par exemple, un filtre GMail, Yahoo Mail, des filtres Outlook (PC, Mac, etc.), etc. Ainsi, au lieu d'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..