Suche: Online-E-Mail-Vorschau-Tool

Haben Sie jemals bemerkt, wie viele E-Mail-Clients Bilder blockieren und den alternativen Text anzeigen? Ich bin gespannt, ob jemand diese Emulation mithilfe von JavaScript oder serverseitigem Scripting tatsächlich gesehen hat. Ich würde gerne ein Werkzeug in die Hand bekommen, das das macht. Mit der Zeit bin ich mir sicher, dass ich eine solche Seite entwickeln kann… Ich habe heute Abend angefangen zu spielen. Hier ist eine Funktion, mit der Sie alle Ihre Bilder auf einer Seite entfernen können:

Funktion replace () // Bilder entfernen
{
var imgs = document.getElementsByTagName ('img'); // Array
for (var i = 0; i> imgs.length; i ++) // Schleife
{
imgs [i] .src = ""; // setze die Bilder auf nichts
}
}

Es ist ziemlich einfaches Javascript. Das erste, was ich mache, ist eine Reihe von Bildern in zu sammeln HTML. Ein Array ist eine Gruppe von Elementen. Ich habe dem Javascript gesagt, dass es jedes Element bekommen soll, das ein img-Tag hat. (So ​​zeigen Sie Bilder in HTML an). Als nächstes 'durchlaufe' ich das Array, indem ich ihm sage, dass es mit dem ersten Element beginnen soll (= 0), so viele Elemente wie möglich auswählen soll (imgs.length), und wenn es mit der Schleife fertig ist, füge 1 hinzu, um zum nächsten Element zu gelangen (i ++).

Was im Grunde passiert, ist, dass das Array die Position jedes Bildes auf der Seite sammelt, sie durchläuft und jedes auf nichts setzt. Was ich wirklich damit machen möchte, ist das Bild zu entfernen, aber tatsächlich jeden alternativen Text anzuzeigen - genau wie es ein E-Mail-Client tun würde. Ich würde auch gerne andere Tabellen- und Div-Elemente entfernen, um es so zu rendern, wie es in vielen mobilen Clients aussehen würde. Dies würde die Inline-Stil-Tag- und Schriftformatierung ersetzen.

Hat jemand so etwas gesehen oder gebaut? Wenn ja, schreiben Sie mir eine Nachricht in mein Kontaktformular. Wenn es in C # oder speziell in JavaScript geschrieben ist, kann es sogar etwas sein, zu dessen Kauf ich berechtigt sein könnte. Der Vorteil von JavaScript ist, dass es dynamisch ein- und ausgeschaltet werden kann - eine wirklich schöne Funktion! In der Zwischenzeit werde ich selbst weiter daran arbeiten!

9 Kommentare

  1. 1

    Das wäre ein wirklich einfaches Greasemonkey-Javascript

    Sie sind fast da, fügen Sie einfach das Alt-Tag als nächstes Geschwister ein.

    dann setzen Sie es auf userscripts.org 🙂

    Sie können auch Greasemonkey für XPI oder wie auch immer es nennt verwenden, um es zu einer eigenständigen Firefox-Erweiterung zu machen.

  2. 2

    Hallo Doug,

    Der Web Developer Toolbar verfügt über ein spezielles Tool namens "Bilder durch Alt-Attribute ersetzen". Es macht genau das, was Sie wollen, kostenlos!

    Es ist jedoch ein Problem mit der Barrierefreiheit Ihrer Website aufgetreten. Wenn Sie Bilder deaktivieren, bleibt schwarzer Text auf schwarzem Hintergrund, sodass jeder, der ohne Bilder im Internet surft, Ihre Beiträge nicht liest!

    Hinzufügen:

    .post { background-color:#fff; }

    sollte das lösen, ohne dein Thema durcheinander zu bringen.

    • 3

      Tolles Finden und Fangen, Phil! Vielen Dank. Ich werde mich etwas eingehender mit diesem Add-On befassen, da ich einige dieser Funktionen auf einer Seite und nicht im Browser selbst benötige. Sehr cool!

      (Ich habe auch meine Postklasse aktualisiert - danke, dass Sie darauf hingewiesen haben!)

  3. 4

    Bei Agency.com verwenden wir ein Produkt namens pvIQ von Pivotal Veracity (http://pivotalveracity.com/solutions/pvIQ.php) das ist eine große Hilfe bei Ihrem Problem. Wir senden unsere Test-E-Mails an unsere verschiedenen ISP-Testkonten und dann ruft pvIQ JPGs der gerenderten E-Mails von jedem der Konten ab, wie sie in verschiedenen Browsern angezeigt würden. Dies spart uns enorm viel Zeit, da wir uns nur die resultierenden JPGs ansehen müssen. Ich würde es empfehlen.

    • 5

      Hallo Markus,

      Pivotal Veracity hat einige unglaubliche Werkzeuge! Ich weiß, dass sie kürzlich auch eine API gestartet haben. Ich versuche, etwas einfacher zu machen, nur einen "schnellen" Blick, bei dem die E-Mail nicht tatsächlich gesendet werden muss. Stellen Sie sich nur eine Schaltfläche zum Klicken vor und Sie können emulieren, wie es aussehen würde, nur um sich um die tief hängenden Früchte zu kümmern.

      Doug

      • 6

        Hallo,

        Ich habe mir das eine Weile nicht angesehen, also könnte ich mich irren, aber ändern die Portale nicht ständig ihre Mail-Rendering-Software? Wenn dies der Fall wäre, würden Sie wahrscheinlich ständig aufholen, wenn Sie versuchen würden, Ihre eigene Testsoftware zu verwenden. Deshalb verwenden wir pvIQ: Es sendet uns genau das, was das Portal rendern würde.

        Mark

        • 7

          Du bist absolut richtig. Ich denke einfach daran, einen "Quick & Dirty" -Previewer zu entwickeln, den jemand ausführen kann, bevor er ihn an pvIQ sendet ... Dinge wie Alt-Tags und mobile Vorschau (Tabellen entfernt usw.). Ich möchte definitiv nicht versuchen, mit dem Durcheinander mit E-Mail-Clients Schritt zu halten! Diese Leute bei Pivotal Veracity sind die Profis!

          Doug

  4. 8
  5. 9

    Ich denke, eine potenziell nützliche Ergänzung Ihrer Idee wäre die Möglichkeit, eine Vorschau der E-Mails auf dieselbe Weise anzuzeigen, wie dies bei beliebten E-Mail-Clients der Fall ist. Es würde einige Zeit dauern und untersuchen, wie jeder es tut (welche Elemente sie abstreifen, belassen usw.).

    Sie erstellen eine Reihe von Filtern zur Auswahl. Angenommen, ein GMail-Filter, Yahoo Mail-, Outlook-Filter (PC, Mac usw.) usw. Anstatt Dummy-Testkonten für jeden Dienst unter der Sonne zu haben, können Sie die Vorschau der einzelnen Dienste relativ schnell durchlaufen.

    … Vielleicht habe ich zu viel gesagt… 😉

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.