Ищу: инструмент предварительного просмотра электронной почты в Интернете

Вы когда-нибудь замечали, сколько почтовых клиентов блокируют изображения и отображают альтернативный текст? Мне любопытно, действительно ли кто-нибудь видел, как это эмулируется с использованием JavaScript или серверных сценариев. Я бы хотел заполучить инструмент, который это делает. Со временем я уверен, что смогу разработать такую ​​страницу… Я действительно начал играть сегодня вечером. Вот функция, которая удаляет все ваши изображения на странице:

function replace () // удаляем изображения
{
var imgs = document.getElementsByTagName ('img'); // массив
for (var i = 0; i> imgs.length; i ++) // цикл
{
imgs [i] .src = ""; // обнуляем изображения
}
}

Это довольно простой Javascript. Первое, что я делаю, это собираю массив изображений в HTML. Массив - это группа элементов. Я сказал javascript получить каждый элемент с тегом img. (Вот как вы отображаете изображения в HTML). Затем я «прохожу» по массиву, говоря, что он должен начинаться с первого элемента (= 0), выбираю столько элементов, сколько есть (imgs.length), и когда это делается с циклом, добавляю 1, чтобы перейти к следующему элементу. (i ++).

Что в основном происходит, так это то, что массив собирает местоположение каждого изображения на странице, просматривает их в цикле и устанавливает для каждого значения ничего. Что я действительно хотел бы сделать с этим, так это удалить изображение, но на самом деле отобразить любой альтернативный текст - точно так же, как это сделал бы почтовый клиент. Я также хотел бы удалить другие элементы table и div, чтобы они отображались так, как они будут выглядеть во многих мобильных клиентах. Это заменит встроенный тег стиля и форматирование шрифта.

Кто-нибудь видел или строил что-нибудь подобное? Если да, напишите мне в моей контактной форме. Если он написан на C # или особенно на JavaScript, мне может быть разрешено приобрести его. Преимущество JavaScript в том, что его можно выключать и включать динамически - действительно приятная функция! А пока я сам продолжу над этим работать!

9 комментариев

  1. 1

    Это был бы действительно простой javascript Greasemonkey

    Вы почти у цели, просто вставьте тег alt как nextSibling.

    затем выложите на userscripts.org 🙂

    Вы также можете использовать Greasemonkey для XPI или как там он называется, чтобы сделать его полноценным автономным расширением Firefox.

  2. 2

    Привет, Дуг,

    Освободи Себя Панель инструментов веб-разработчика имеет специальный инструмент для этого, который называется «Заменить изображения с помощью атрибутов Alt». Он делает именно то, что вы хотите, бесплатно!

    Однако это вызвало проблему с доступностью вашего сайта. При отключении изображений черный текст остается на черном фоне, поэтому любой, кто просматривает веб-страницы без изображений, не будет читать ваши сообщения!

    Добавление:

    .post { background-color:#fff; }

    должен решить это, не испортив тему.

    • 3

      Отличная находка и улов, Фил! Спасибо. Я собираюсь углубиться в это дополнение, поскольку мне нужны некоторые из этих функций на странице, а не в самом браузере. Очень круто!

      (Я также обновил свой пост-класс - спасибо, что указали на это!)

  3. 4

    В Agency.com мы используем продукт под названием pvIQ от Pivotal Veracity (http://pivotalveracity.com/solutions/pvIQ.php), что очень поможет в решении вашей проблемы. Мы отправляем наши тестовые электронные письма нашим различным тестовым учетным записям интернет-провайдеров, а затем pvIQ извлекает jpgs-файлы обработанных писем из каждой из учетных записей, как они будут отображаться в разных браузерах. Это экономит нам огромное количество времени, так как все, что нам нужно сделать, это посмотреть на полученные в результате файлы в формате JPG. Я рекомендую это.

    • 5

      Привет Марк,

      В Pivotal Veracity есть невероятные инструменты! Я знаю, что они недавно также запустили API. Я пытаюсь сделать что-то попроще, просто «бегло» посмотреть, что не требует фактической отправки электронного письма. Представьте себе кнопку, которую нужно щелкнуть, и вы можете имитировать, как она будет выглядеть, просто чтобы позаботиться о низко висящем фрукте.

      Дуг

      • 6

        Здравствуйте,

        Я давно не смотрел на это, поэтому могу ошибаться, но разве порталы не меняют свое программное обеспечение для обработки почты? Если бы они это сделали, я бы подумал, что вы бы постоянно играли в догонялки, если бы попытались использовать свое собственное тестовое программное обеспечение. Вот почему мы используем pvIQ: он отправляет нам именно то, что будет отображать портал.

        Отметьте

        • 7

          Вы абсолютно правы. Я просто думаю о разработке «быстрого и грязного» превьюера, который кто-то может запустить перед отправкой во что-то вроде pvIQ… такие вещи, как теги Alt и мобильный предварительный просмотр (таблицы удалены и т. Д.). Я определенно не хочу угнаться за беспорядком с почтовыми клиентами! Ребята из Pivotal Veracity - в этом профи!

          Дуг

  4. 8
  5. 9

    Я думаю, что потенциально полезным дополнением к вашей идее будет возможность предварительно просматривать электронные письма так же, как это делают популярные почтовые клиенты. Потребуется некоторое время и изучение того, как каждый из них это делает (какие элементы они убирают, оставляют и т. Д.).

    Вы создаете серию фильтров на выбор. Скажем, фильтр GMail, Yahoo Mail, фильтры Outlook (ПК, Mac и т. Д.) И т. Д. Таким образом, вместо того, чтобы иметь фиктивные тестовые учетные записи для каждой службы под солнцем, вы можете относительно быстро циклически просматривать предварительные просмотры каждой из них.

    … Возможно, я сказал слишком много… 😉

Как вы думаете?

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.