찾는 방법 : 온라인 이메일 미리보기 도구

얼마나 많은 이메일 클라이언트가 이미지를 차단하고 대체 텍스트를 표시하는지 알아 본 적이 있습니까? 실제로 JavaScript 또는 서버 측 스크립팅을 사용하여 에뮬레이트 된 것을 본 사람이 있는지 궁금합니다. 나는 그것을하는 도구에 손을 얻고 싶다. 시간이 지남에 따라 그런 페이지를 만들 수있을 거라고 확신합니다. 저는 실제로 오늘 밤 게임을 시작했습니다. 페이지의 모든 이미지를 제거하는 기능은 다음과 같습니다.

function replace () // 이미지 제거
{
var imgs = document.getElementsByTagName ( 'img'); //정렬
for (var i = 0; i> imgs.length; i ++) // loop
{
imgs [i] .src = ""; // 이미지를 아무것도 설정하지 않음
}
}

매우 간단한 자바 스크립트입니다. 가장 먼저 할 일은 이미지 배열을 수집하는 것입니다. HTML. 배열은 항목 그룹입니다. img 태그가있는 모든 요소를 ​​가져 오도록 자바 스크립트에 지시했습니다. (이것이 HTML로 이미지를 표시하는 방법입니다). 다음으로 첫 번째 항목 (= 0)으로 시작하고 항목 수 (imgs.length)로 이동하고 루프가 완료되면 1을 추가하여 다음 항목으로 이동하도록 배열을 '루프'합니다. (i ++).

기본적으로 발생하는 것은 배열이 페이지에있는 모든 이미지의 위치를 ​​수집하고이를 반복하며 각각을 아무것도 설정하지 않는 것입니다. 이 작업으로 제가 정말로하고 싶은 것은 이미지를 제거하지만 실제로는 이메일 클라이언트처럼 대체 텍스트를 표시하는 것입니다. 또한 많은 모바일 클라이언트에서 볼 수 있듯이 다른 테이블 및 div 요소를 제거하여 렌더링하고 싶습니다. 이것은 인라인 스타일 태그 및 글꼴 형식을 대체합니다.

이런 걸 보거나 지은 사람이 있습니까? 그렇다면 문의 양식에 메모를 남겨주세요. C # 또는 특히 JavaScript로 작성된 경우 구매 권한이있을 수도 있습니다. JavaScript의 장점은 동적으로 끄고 켤 수 있다는 것입니다. 정말 멋진 기능입니다! 그동안 계속해서 직접 작업하겠습니다!

댓글 9

  1. 1

    정말 간단한 Greasemonkey 자바 스크립트가 될 것입니다.

    거의 완료되었습니다. alt 태그를 nextSibling으로 삽입하기 만하면됩니다.

    그런 다음 userscripts.org에 넣으십시오 🙂

    또한 Greasemonkey를 XPI 또는 적절한 독립형 Firefox 확장으로 만들기 위해 호출되는 모든 것에 사용할 수 있습니다.

  2. 2

    하이 더그,

    그리고, 웹 개발자 툴바 구체적으로 "대체 속성으로 이미지 교체"라는 도구가 있습니다. 무료로 원하는 것을 정확하게 수행합니다!

    그래도 사이트에 접근성 문제가 발생했습니다. 이미지를 끄면 검정색 배경에 검정색 텍스트가 남으므로 이미지없이 웹을 검색하는 사람은 게시물을 읽을 수 없습니다!

    첨가:

    .post { background-color:#fff; }

    그래도 테마를 엉망으로 만들지 않고 해결해야합니다.

    • 3

      찾아서 잡으세요, 필! 정말 고마워. 브라우저 자체가 아닌 페이지에 해당 기능 중 일부가 필요하기 때문에이 추가 기능을 좀 더 자세히 살펴 보겠습니다. 아주 멋지다!

      (저는 포스트 클래스도 업데이트했습니다. 지적 해 주셔서 감사합니다!)

  3. 4

    Agency.com에서는 Pivotal Veracity의 pvIQ라는 제품을 사용합니다 (http://pivotalveracity.com/solutions/pvIQ.php) 그것은 당신의 문제에 큰 도움이됩니다. 테스트 이메일을 다양한 ISP 테스트 계정으로 보낸 다음 pvIQ는 다른 브라우저에 표시되는 것처럼 각 계정에서 렌더링 된 이메일의 jpg를 검색합니다. 이렇게하면 결과 jpg를 확인하기 만하면되기 때문에 엄청난 시간을 절약 할 수 있습니다. 나는 그것을 추천합니다.

    • 5

      안녕하세요 마크,

      Pivotal Veracity에는 몇 가지 놀라운 도구가 있습니다! 최근에 API도 출시 한 것으로 알고 있습니다. 저는 이메일을 실제로 보낼 필요가없는 '빠른'외모로 좀 더 간단한 작업을하려고합니다. 클릭 할 수있는 버튼 하나를 상상해 보라. 그러면 그것이 어떻게 보일지 에뮬레이션 할 수있다.

      • 6

        안녕,

        나는 이것을 한동안 보지 않았기 때문에 내가 틀렸을 수도 있지만 포털이 메일 렌더링 소프트웨어를 계속 변경하지 않습니까? 만약 그들이 그렇게했다면, 나는 당신이 당신 자신의 테스트 소프트웨어를 사용하려고한다면 당신이 계속 따라 잡을 것이라고 생각할 것입니다. 이것이 우리가 pvIQ를 사용하는 이유입니다. 포털이 렌더링 할 내용을 정확히 전송합니다.

        표시

        • 7

          당신은 절대적으로 맞습니다. 내 생각은 단순히 누군가가 pvIQ와 같은 것을 보내기 전에 실행할 수있는 '빠르고 더러운'프리 뷰어를 개발하는 것입니다. Alt 태그 및 모바일 미리보기 (테이블 제거 등)와 같은 것입니다. 나는 이메일 클라이언트와 함께 엉망이되는 상황을 따라 가고 싶지 않습니다! Pivotal Veracity의 사람들은 그 전문가입니다!

  4. 8

    이 같은?

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

  5. 9

    귀하의 아이디어에 잠재적으로 유용한 추가 기능은 인기있는 이메일 클라이언트와 동일한 방식으로 이메일을 미리 볼 수있는 기능입니다. 각각의 작업 방식 (어떤 요소가 제거되고 남겨 지는지 등)에 대해 시간과 연구가 필요합니다.

    선택할 수있는 일련의 필터를 만듭니다. 예를 들어, GMail 필터, Yahoo Mail, Outlook (PC, Mac 등) 필터 등이 있습니다. 따라서 모든 서비스에 대해 더미 테스트 계정을 가질 필요없이 각 서비스의 미리보기를 비교적 빠르게 순환 할 수 있습니다.

    … 내가 너무 많이 말했을 수도 있습니다… 😉

당신은 어떻게 생각하십니까?

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.