Etsitään: Sähköpostin esikatselutyökalu

Oletko koskaan huomannut, kuinka moni sähköpostiohjelma estää kuvia ja näyttää vaihtoehtoisen tekstin? Olen utelias, onko joku todella nähnyt tämän emuloidun käyttämällä JavaScriptiä tai palvelinpuolen komentosarjoja. Haluaisin saada käsiinsä työkalun, joka tekee sen. Ajan myötä olen varma, että voin kehittää tällaisen sivun ... Aloin itse pelata tänään. Tässä on toiminto, joka poistaa kaikki sivusi kuvat:

toiminto korvaa () // poista kuvat
{
var imgs = document.getElementsByTagName ('img'); // taulukko
for (var i = 0; i> kuvien pituus; i ++) // -silmukalle
{
imgs [i] .src = ""; // aseta kuvat tyhjäksi
}
}

Se on melko yksinkertainen Javascript. Ensimmäinen asia, jonka teen, on kerätä joukko kuvia HTML. Taulukko on joukko kohteita. Käskin javascriptia hankkimaan kaikki elementit, joilla on img-tunniste. (Näin näytät kuvia HTML-muodossa). Seuraavaksi 'silmukan' matriisin läpi käskemällä sitä alkamaan ensimmäisestä alkiosta (= 0), menemään niin monta kohdetta kuin on (kuv. Pituus), ja kun se on tehty silmukan kanssa, lisää 1 siirtyäksesi seuraavaan kohtaan (i ++).

Pohjimmiltaan tapahtuu, että taulukko kerää jokaisen sivun kuvan sijainnin, silmukkaa niiden läpi ja asettaa kukin tyhjäksi. Haluaisin todella tehdä tämän kanssa poistamalla kuvan, mutta näyttämällä oikeastaan ​​kaikki vaihtoehtoiset tekstit - aivan kuten sähköpostiohjelma tekisi. Haluaisin myös poistaa muut taulukko- ja div-elementit renderöimällä sen, kuten se näyttäisi monilta mobiili-asiakkailta. Tämä korvaisi sisäisen tyylin tunnisteen ja fontin muotoilun.

Onko kukaan nähnyt tai rakentanut mitään tällaista? Jos näin on, pudota minulle muistiinpano yhteydenottolomakkeeseen. Jos se on kirjoitettu C #: lla tai erityisesti JavaScriptiä, se voi jopa olla jotain, jonka voisin valtuuttaa ostamaan. JavaScriptin etuna on, että se voidaan kytkeä pois päältä ja päälle dynaamisesti - todella hieno ominaisuus! Sillä välin jatkan sen tekemistä itse!

9 Kommentit

  1. 1

    Se olisi todella yksinkertainen Greasemonkey javascript

    Olet melkein perillä, lisää vain alt-tagi seuraavaksi sisarukseksi.

    aseta se sitten userscripts.org 🙂

    Voit myös käyttää Greasemonkeyä XPI: hen tai mihin tahansa sitä kutsutaan, jotta siitä tulisi oikea erillinen Firefox-laajennus.

  2. 2

    Hei Doug,

    - Web-kehittäjätyökalurivi on työkalu tämän tekemiseen, nimeltään “Korvaa kuvat Alt-määritteillä”. Se tekee juuri sen, mitä haluat ilmaiseksi!

    Se kuitenkin nosti esteettömyysongelman sivustollesi. Kuvien poistaminen käytöstä jättää mustan tekstin mustalle taustalle, joten kuka tahansa, joka surffaa verkossa ilman kuvia, ei lue viestejäsi!

    lisääminen:

    .post { background-color:#fff; }

    pitäisi ratkaista se sekoittamatta teemaa.

    • 3

      Loistava löytö ja kiinni, Phil! Kiitos paljon. Aion kaivaa tätä lisäosaa hieman syvemmälle, koska tarvitsen osan toiminnoista sivulle pikemminkin kuin itse selain. Todella siistiä!

      (Päivitin myös postikurssini - kiitos, että osoitit sen!)

  3. 4

    Agent.com-sivustossa käytämme Pivotal Veracityn pvIQ-tuotetta (http://pivotalveracity.com/solutions/pvIQ.php), joka on iso apu ongelmasi. Lähetämme testisähköpostimme erilaisille ISP-testitileillemme ja sitten pvIQ hakee JPG: t renderoiduista sähköposteista kustakin tilistä, koska ne näkyisivät eri selaimissa. Tämä säästää valtavasti aikaa, koska meidän on vain tarkasteltava tuloksena olevia JPG-tiedostoja. Suosittelen sitä.

    • 5

      Hei Mark,

      Pivotal Veracityllä on uskomattomia työkaluja! Tiedän, että he ovat äskettäin käynnistäneet myös API: n. Yritän tehdä jotain hieman yksinkertaisempaa, vain "nopean" ilmeen, joka ei vaadi sähköpostin lähettämistä. Kuvittele vain yksi napsautettava painike ja voit jäljitellä miltä se näyttää, vain huolehtimaan matalasti roikkuvista hedelmistä.

      Doug

      • 6

        Hei,

        En ole katsonut tätä pitkään aikaan, joten voin olla väärässä, mutta eivätkö portaalit muuta postin renderointiohjelmistoa? Jos he tekisivät, luulisin, että pelaat jatkuvasti kiinniottoa, jos yrität käyttää omaa testiohjelmistoa. Siksi käytämme pvIQ: ta lähettää meille tarkalleen, mitä portaali tekisi.

        Merkitse

        • 7

          Olet aivan oikeassa. Ajattelen yksinkertaisesti kehittää "nopean ja likainen" esikatseluohjelman, jonka joku voisi suorittaa ennen lähettämistä esimerkiksi pvIQ: lle ... esimerkiksi Alt-tunnisteet ja mobiilikatselu (taulukot poistettu jne.). En todellakaan halua yrittää pysyä ajan tasalla sähköpostiohjelmien kanssa! Nuo ihmiset Pivotal Veracityssä ovat hyviä!

          Doug

  4. 8

    Jotain tällaista?

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

  5. 9

    Mielestäni mahdollisesti hyödyllinen lisäys ideasi olisi mahdollisuus esikatsella sähköposteja samalla tavalla kuin suositut sähköpostiohjelmat tekevät. Se vie jonkin aikaa ja tutkimusta siitä, miten kukin tekee sen (mitä elementtejä he riisuvat, jättävät jne.).

    Rakennat sarjan suodattimia, joista valita. Oletetaan, että GMail-suodatin, Yahoo Mail, Outlook (PC, Mac jne.) -Suodattimet jne. Joten sen sijaan, että sinulla olisi oltava testitilejä jokaisen palvelun alla, voit selata kunkin esikatselua suhteellisen nopeasti.

    … Ehkä olen sanonut liikaa ... 😉

Mitä mieltä olet?

Tämä sivusto käyttää Akismetiä roskapostin vähentämiseksi. Lue, miten kommenttitietosi käsitellään.