使用Javascript随机为邮件正文的每个单词着色

时间:2015-06-29 10:52:17

标签: javascript email javamail

我使用此<resources> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/color_primary</item> <item name="colorPrimaryDark">@color/color_primary_dark</item> <item name="colorAccent">@color/accent</item> </style> <color name="color_primary">#00B33C</color> <color name="color_primary_dark">#006622</color> <color name="accent">#FFB366</color> 随机为邮件正文的每个单词着色。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <include android:id="@+id/toolbar" layout="@layout/toolbar" />

    <TextView android:id="@+id/text"
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:paddingTop="16dp"
        android:textSize="20sp" />

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:scrollbars="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="8dp"
        android:paddingRight="8dp"
        android:paddingTop="8dp"
        android:paddingBottom="16dp" />

</LinearLayout>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:src="@android:drawable/ic_input_add"
    android:layout_margin="24dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:borderWidth="0dp" />

但是,它并没有在实际的邮件正文中工作。但是,当我通过javascript文件运行时,收到邮件的源代码正常工作。

有任何线索吗?

4 个答案:

答案 0 :(得分:1)

邮件客户端有办法显示HTML(在某种程度上甚至使用CSS)但你不应该将它们误认为是任何类型的浏览器。据我所知,大多数客户内部缺少一个像样的JS引擎,即使从外部来源拍摄的图像也很难。

一种可能的解决方案是编译通过任务运行器(Grunt / Gulp)尝试发送的任何内容,或者以其他方式准备最终文档并发送输出HTML。

答案 1 :(得分:0)

安排您的阅读代码。你应该正确使用地图功能。

&#13;
&#13;
    $(window).load(function() {
      var colors = ['red', 'blue', 'green', 'pink', 'black'];
      $('blockquote').each(function() {
        var array = $(this).text().split(' ');
        var newArray = $.map(array, function(v) {
          return '<span style="color:' + colors[Math.floor(Math.random() * colors.length)] + '">' + v + '</span>';
        });
        $(this).html(newArray.join(' '));
      });
    });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote>11111 11111</blockquote>
<blockquote>11111 11111</blockquote>
<blockquote>1111 111111</blockquote>
<blockquote>11111 11111</blockquote>
&#13;
&#13;
&#13;

希望得到这个帮助。

答案 2 :(得分:0)

使用var存储新的html:

var colors = ['red', 'blue', 'green', 'pink', 'black'];
$('blockquote').each(function () {
    var newText = "";
    $(this).html($(this).text().split(' ').map(function (v) {
        newText += encodeURIComponent('<span style="color:' + colors[Math.floor(Math.random() * colors.length)] + '">' + v + '</span> ');
    }));
    $(this).html(newText);
});

JsFiddle:http://jsfiddle.net/ghorg12110/x5a9anez/3/

答案 3 :(得分:0)

我怀疑您尝试在电子邮件中运行JavaScript是导致问题的根源,但list of CSS support in email clients可能会对您有所帮助。