Alla ricerca di: strumento di anteprima email online

Hai mai notato quanti client di posta elettronica bloccano le immagini e visualizzano il testo alternativo? Sono curioso di sapere se qualcuno ha effettivamente visto questo emulato utilizzando JavaScript o script lato server. Vorrei mettere una mano su uno strumento che lo fa. Col tempo, sono sicuro di poter sviluppare una pagina del genere… In realtà ho iniziato a suonare stasera. Ecco una funzione che rimuove tutte le tue immagini su una pagina:

function replace () // rimuove le immagini
{
var imgs = document.getElementsByTagName ('img'); //Vettore
for (var i = 0; i> imgs.length; i ++) // loop
{
imgs [i] .src = ""; // imposta le immagini su nulla
}
}

È piuttosto semplice Javascript. La prima cosa che faccio è raccogliere una serie di immagini in formato HTML. Un array è un gruppo di elementi. Ho detto al javascript di ottenere ogni elemento che ha un tag img. (È così che visualizzi le immagini in HTML). Successivamente faccio un 'ciclo' attraverso l'array dicendogli di iniziare con il primo elemento (= 0), di andare per tutti gli elementi che ci sono (imgs.length), e quando ha finito con il ciclo aggiungo 1 per passare all'elemento successivo (i ++).

Ciò che fondamentalmente accade è che l'array raccoglie la posizione di ogni immagine sulla pagina, le scorre in loop e le imposta su nulla. Quello che mi piacerebbe davvero fare con questo è rimuovere l'immagine ma in realtà visualizzare qualsiasi testo alternativo, proprio come farebbe un client di posta elettronica. Mi piacerebbe anche rimuovere altri elementi table e div per renderlo come apparirebbe in molti client mobili. Ciò sostituirà il tag di stile in linea e la formattazione del carattere.

Qualcuno ha visto o costruito qualcosa di simile? In tal caso, scrivimi una nota nel mio modulo di contatto. Se è scritto in C # o soprattutto JavaScript, potrebbe anche essere qualcosa che potrei essere autorizzato ad acquistare. Il vantaggio di JavaScript è che può essere attivato e disattivato dinamicamente: una funzionalità davvero interessante! Nel frattempo, continuerò a lavorarci da solo!

Commenti

  1. 1

    Sarebbe un javascript Greasemonkey davvero semplice

    Ci sei quasi, inserisci il tag alt come nextSibling.

    poi mettilo su userscripts.org 🙂

    Puoi anche usare Greasemonkey per XPI o qualunque cosa sia chiamata per renderla una corretta estensione autonoma per Firefox.

  2. 2

    Ciao Doug,

    Il progetto Barra degli strumenti per sviluppatori Web ha uno strumento per farlo specificamente, chiamato "Sostituisci immagini con attributi alternativi". Fa esattamente quello che vuoi gratuitamente!

    Tuttavia, ha sollevato un problema di accessibilità con il tuo sito. La disattivazione delle immagini lascia il testo nero su uno sfondo nero, quindi chiunque navighi sul Web senza immagini attive non leggerà i tuoi post!

    Aggiunta:

    .post { background-color:#fff; }

    dovresti risolverlo senza rovinare il tuo tema.

    • 3

      Ottima scoperta e cattura, Phil! Grazie mille. Approfondirò questo componente aggiuntivo poiché ho bisogno di alcune di quelle funzionalità in una pagina piuttosto che nel browser stesso. Molto bello!

      (Ho anche aggiornato la mia lezione di post - grazie per averlo fatto notare!)

  3. 4

    In Agency.com utilizziamo un prodotto chiamato pvIQ di Pivotal Veracity (http://pivotalveracity.com/solutions/pvIQ.php) che è di grande aiuto con il tuo problema. Inviamo le nostre e-mail di prova ai nostri vari account di prova ISP e quindi pvIQ recupera i jpg delle e-mail renderizzate da ciascuno degli account, come apparirebbero in browser diversi. Questo ci fa risparmiare enormi quantità di tempo, poiché tutto ciò che dobbiamo fare è guardare i jpg risultanti. Lo consiglierei.

    • 5

      Ciao Marco,

      Pivotal Veracity ha alcuni strumenti incredibili! So che di recente hanno anche lanciato un'API. Sto cercando di fare qualcosa di un po 'più semplice, solo uno sguardo "veloce" che non richieda effettivamente l'invio dell'email. Immagina solo un pulsante per fare clic e puoi emulare come apparirebbe, solo per prenderti cura del frutto basso.

      Doug

      • 6

        Ciao,

        Non lo guardo da un po ', quindi potrei sbagliarmi, ma i portali non continuano a cambiare il loro software di rendering della posta? Se lo facessero, penserei che staresti costantemente a recuperare se provassi a utilizzare il tuo software di prova. Ecco perché usiamo pvIQ: ci invia esattamente ciò che il portale renderebbe.

        Mark

        • 7

          Hai assolutamente ragione. Il mio pensiero è semplicemente sviluppare un visualizzatore di anteprima "veloce e sporco" che qualcuno potrebbe eseguire prima di inviare a qualcosa come pvIQ ... cose come tag Alt e anteprima mobile (tabelle rimosse, ecc.). Sicuramente non voglio provare a tenere il passo con il casino là fuori con i client di posta! Quelle persone di Pivotal Veracity sono dei professionisti in questo!

          Doug

  4. 8
  5. 9

    Penso che un'aggiunta potenzialmente utile alla tua idea sarebbe la possibilità di visualizzare in anteprima le e-mail nello stesso modo in cui fanno i client di posta elettronica più diffusi. Ci vorrebbe un po 'di tempo e ricercare come ognuno lo fa (quali elementi togliere, lasciare, ecc.).

    Costruisci una serie di filtri tra cui scegliere. Diciamo, un filtro GMail, Yahoo Mail, filtri Outlook (PC, Mac, ecc.), Ecc. Quindi, invece di dover avere account di prova fittizi con ogni servizio sotto il sole, potresti scorrere le anteprime di ciascuno in modo relativamente rapido.

    ... forse ho detto troppo ... 😉

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.