În căutare: Instrument de previzualizare a e-mailului online

Ați observat vreodată câți clienți de e-mail blochează imagini și afișează textul alternativ? Sunt curios dacă cineva a văzut de fapt acest emulat folosind JavaScript sau scripturi de pe server. Aș vrea să pun mâna pe un instrument care o face. De-a lungul timpului, sunt sigur că pot dezvolta o astfel de pagină ... De fapt, am început să joc în seara asta. Iată o funcție care elimină toate imaginile dintr-o pagină:

funcție replace () // șterge imagini
{
var imgs = document.getElementsByTagName ('img'); // matrice
pentru (var i = 0; i> imgs.length; i ++) // buclă
{
imgs [i] .src = ""; // setează imaginile la nimic
}
}

Este destul de simplu Javascript. Primul lucru pe care îl fac este să colectez o serie de imagini în HTML. O matrice este un grup de articole. I-am spus javascriptului să obțină fiecare element care are o etichetă img. (Așa afișați imagini în HTML). Apoi „buclez” prin matriță spunându-i să înceapă cu primul element (= 0), merg pe cât de multe elemente există (imgs.length), iar când se termină cu bucla adăugați 1 pentru a trece la următorul element (i ++).

Ceea ce se întâmplă în principiu este că matricea colectează locația fiecărei imagini de pe pagină, trece prin ele și setează fiecare la nimic. Ceea ce aș vrea cu adevărat să fac cu acest lucru este să eliminați imaginea, dar să afișez de fapt orice text alternativ - la fel ca un client de e-mail. Mi-ar plăcea, de asemenea, să elimin alte elemente de tabel și div pentru a le reda așa cum ar arăta la mulți clienți mobili. Aceasta ar înlocui eticheta de stil în linie și formatarea fontului.

A văzut sau a construit cineva așa ceva? Dacă da, trimiteți-mi o notă în formularul meu de contact. Dacă este scris în C # sau mai ales JavaScript, poate fi chiar ceva ce aș putea fi autorizat să cumpăr. Avantajul JavaScript este că ar putea fi dezactivat și activat dinamic - o caracteristică foarte frumoasă! Între timp, voi continua să lucrez la asta chiar eu!

4 Comentarii

  1. 1

    Ar fi un javascript Greasemonkey foarte simplu

    Sunteți aproape acolo, trebuie doar să introduceți eticheta alt ca următor frate.

    apoi puneți-l pe userscripts.org 🙂

    De asemenea, ați putea folosi Greasemonkey pentru XPI sau orice altceva se numește pentru a face din aceasta o extensie Firefox independentă.

  2. 2

    Bună Doug,

    Bara de instrumente pentru dezvoltatori web are un instrument pentru a face acest lucru în mod specific, numit „Înlocuiți imaginile cu atribute Alt”. Face exact ceea ce vrei gratuit!

    Totuși, a provocat o problemă de accesibilitate cu site-ul dvs. Dezactivarea imaginilor lasă text negru pe un fundal negru, astfel încât oricine navighează pe web fără imagini nu vă va citi postările!

    Adăugarea:

    .post { background-color:#fff; }

    ar trebui să rezolve asta fără a vă încurca tema.

    • 3

      Mare descoperire și captură, Phil! Multumesc mult. Voi intra în acest supliment un pic mai adânc, deoarece am nevoie de o anumită funcționalitate într-o pagină, mai degrabă decât în ​​browser-ul în sine. Foarte tare!

      (De asemenea, mi-am actualizat clasa de postare - vă mulțumesc că ați subliniat asta!)

  3. 4

    La Agency.com folosim un produs numit pvIQ de la Pivotal Veracity (http://pivotalveracity.com/solutions/pvIQ.php) acesta este un mare ajutor cu problema ta. Trimitem e-mailurile de testare către diferitele noastre conturi de testare ale ISP-ului și apoi pvIQ preia jpg-urile de e-mailuri redate din fiecare cont, așa cum ar apărea în diferite browsere. Acest lucru ne economisește cantități enorme de timp, deoarece tot ce trebuie să facem este să ne uităm la jpg-urile rezultate. L-aș recomanda.

    • 5

      Hi Mark,

      Pivotal Veracity are câteva instrumente incredibile! Știu că au lansat recent și un API. Încerc să fac ceva puțin mai simplu, doar o privire „rapidă” care nu necesită trimiterea efectivă a e-mailului. Imaginați-vă doar un buton pentru a face clic și puteți imita cum ar arăta, doar pentru a avea grijă de fructele cu agățare redusă.

      Doug

      • 6

        Bună,

        Nu m-am uitat la asta de ceva timp, așa că s-ar putea să mă înșel, dar portalurile nu își schimbă software-ul de redare a e-mailurilor? Dacă ar face-o, aș crede că v-ați juca în mod constant la curent dacă ați încerca să utilizați propriul software de testare. De aceea folosim pvIQ: ne trimite exact ceea ce ar reda portalul.

        marca

        • 7

          Ai absolut dreptate. Gândirea mea este pur și simplu să dezvolt o previzualizare „rapidă și murdară” pe care cineva ar putea să o execute înainte de a o trimite la ceva de genul pvIQ ... lucruri precum etichetele Alt și previzualizarea mobilă (tabelele eliminate etc.). Cu siguranță nu vreau să încerc să țin pasul cu mizeria cu clienții de e-mail! Acei oameni de la Pivotal Veracity sunt profesioniștii!

          Doug

  4. 8
  5. 9

    Cred că o completare potențial utilă la ideea ta ar fi capacitatea de a previzualiza e-mailurile în același mod în care fac clienții de e-mail populari. Ar fi nevoie de ceva timp și de cercetare a modului în care o face fiecare (ce elemente trebuie să le dezbrace, să le lase etc.).

    Construiți o serie de filtre din care să alegeți. Să zicem, un filtru GMail, Yahoo Mail, filtre Outlook (PC, Mac etc.) etc. Așadar, în loc să aveți conturi de test fictive cu fiecare serviciu sub soare, puteți parcurge relativ rapid previzualizările fiecăruia.

    ... poate am spus prea multe ... 😉

Ce părere ai?

Acest site folosește Akismet pentru a reduce spamul. Aflați cum sunt procesate datele despre comentarii.