Cercant: eina de previsualització de correu electrònic en línia

Alguna vegada us heu adonat de quants clients de correu electrònic bloquegen imatges i mostren el text alternatiu? Tinc curiositat per saber si algú ha vist aquest emulat mitjançant JavaScript o scripts del servidor. M'agradaria aconseguir una mà en una eina que ho faci. Amb el pas del temps, estic segur que puc desenvolupar aquesta pàgina ... De fet, he començat a jugar aquesta nit. A continuació, es mostra una funció que elimina totes les imatges d’una pàgina:

funció replace () // elimina imatges
{
var imgs = document.getElementsByTagName ('img'); // matriu
per a (var i = 0; i> imgs.length; i ++) // bucle
{
imgs [i] .src = ""; // fixar les imatges en res
}
}

És Javascript força senzill. El primer que faig és recopilar una sèrie d’imatges HTML. Una matriu és un grup d’elements. Li vaig dir a javascript que obtingués tots els elements que tinguessin una etiqueta img. (Així es mostren imatges en HTML). A continuació, faig un "bucle" a través de la matriu dient-li que comenci amb el primer element (= 0), trieu tants elements com hi ha (imgs.length) i, quan es faci el bucle, afegiu 1 per passar al següent element. (i ++).

El que passa bàsicament és que la matriu recopila la ubicació de totes les imatges de la pàgina, les recorre i les converteix en res. El que realment m'agradaria fer amb això és eliminar la imatge, però en realitat mostrar qualsevol text alternatiu, tal com ho faria un client de correu electrònic. També m'encantaria eliminar altres elements de taula i div per representar-los tal com es veuria en molts clients mòbils. Això substituiria l'etiqueta d'estil en línia i el format de tipus de lletra.

Algú ha vist o construït alguna cosa així? Si és així, envieu-me una nota al formulari de contacte. Si està escrit en C # o especialment en JavaScript, fins i tot pot ser una cosa que podria estar autoritzada a comprar. L’avantatge de JavaScript és que es podria desactivar i activar dinàmicament, una característica molt agradable. Mentrestant, continuaré treballant-hi jo mateix!

9 Comentaris

  1. 1

    Seria un javascript Greasemonkey molt senzill

    Ja gairebé hi sou, només cal que inseriu l’etiqueta alt com a nextSibling.

    a continuació, poseu-lo a userscripts.org 🙂

    També podeu utilitzar Greasemonkey per XPI o el que es digui per convertir-la en una extensió de Firefox autònoma adequada.

  2. 2

    Hola Doug,

    L' Barra d'eines per a desenvolupadors web té una eina per fer-ho específicament, anomenada "Substitueix les imatges per atributs alt". Fa exactament el que voleu de franc.

    Tot i això, va provocar un problema d’accessibilitat amb el vostre lloc. Si desactiveu les imatges, deixareu text negre sobre un fons negre, de manera que qualsevol persona que navega pel web sense imatges no llegirà les vostres publicacions.

    Afegint:

    .post { background-color:#fff; }

    hauria de solucionar-ho sense desordenar el tema.

    • 3

      Gran descoberta i captura, Phil! Moltes gràcies. Vaig a aprofundir en aquest complement una mica més profundament, ja que necessito algunes d'aquestes funcions en una pàgina en lloc del navegador en si. Molt guai!

      (També he actualitzat la meva classe de publicacions, gràcies per assenyalar-ho!)

  3. 4

    A Agency.com fem servir un producte anomenat pvIQ de Pivotal Veracity (http://pivotalveracity.com/solutions/pvIQ.php) és una gran ajuda per al vostre problema. Enviem els correus electrònics de prova als nostres diversos comptes de prova d’ISP i, a continuació, pvIQ recupera jpg dels correus electrònics renderitzats de cadascun dels comptes, ja que apareixerien en diferents navegadors. Això ens estalvia enormes quantitats de temps, ja que tot el que hem de fer és mirar els fitxers jpg resultants. Ho recomano.

    • 5

      Hola Marc,

      Pivotal Veracity té algunes eines increïbles. Sé que recentment també han llançat una API. Intento fer alguna cosa una mica més senzill, només un aspecte "ràpid" que no requereixi l'enviament del correu electrònic. Imagineu només un botó per fer clic i podeu imitar com quedaria, només per tenir cura de la fruita poc penjant.

      Doug

      • 6

        Hola,

        Fa temps que no ho miro, així que podria estar equivocat, però els portals no continuen canviant el seu programari de representació de correu? Si ho fessin, pensaria que estaria jugant constantment a posar-se al dia si intentés utilitzar el seu propi programari de prova. Per això fem servir pvIQ: ens envia exactament el que representaria el portal.

        Marca

        • 7

          Tens tota la raó. El meu pensament és simplement desenvolupar una vista prèvia "ràpida i bruta" que algú pogués executar abans d'enviar-la a pvIQ ... coses com ara etiquetes Alt i previsualització per a mòbils (taules eliminades, etc.). Definitivament, no vull intentar estar al dia amb l’embolic amb els clients de correu electrònic. Aquelles persones de Pivotal Veracity en són els avantatges.

          Doug

  4. 8

    Alguna cosa com això?

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

  5. 9

    Crec que una addició potencialment útil a la vostra idea seria la possibilitat de previsualitzar els correus electrònics de la mateixa manera que ho fan els clients de correu electrònic populars. Es necessitaria una mica de temps i investigar com ho fa cadascú (quins elements treuen, deixen, etc.).

    Creeu una sèrie de filtres per triar. Per exemple, un filtre de GMail, filtres de Yahoo Mail, Outlook (PC, Mac, etc.), etc. Per tant, en lloc d’haver de tenir comptes de prova falsos amb tots els serveis sota el sol, podríeu recórrer les visualitzacions prèvies de manera relativament ràpida.

    ... potser he dit massa ... 😉

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.