如何通过Google协作平台上的按钮发送电子邮件(包含空格)?

时间:2017-02-21 14:57:25

标签: javascript html css email google-sites

我需要编写一个按钮,在单击时在用户计算机上打开电子邮件。听起来很简单,但我遇到了很多麻烦,我正在使用谷歌网站,我在HTML框中有我的代码,允许使用CSS。我目前有一些打开电子邮件的按钮,但我无法将电子邮件中的空格作为普通空格。

我最初尝试制作一个表单按钮来提交到一个网页,该表单在最初的“?”之后切断了所有内容。在URL中。当我意识到我在问它的​​时候有意义。我在电子邮件中添加了额外的隐藏表单元素以及我想要的标题和正文的内容。通过使用这种方法,我看不到允许将空格放入URL而不将它们转换为其他内容的方法。

以下代码是我当前使用的HTML,它会生成带有“+”而不是“”和“%2520”而不是“”的电子邮件。

<style>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
        max-width: 1000px;
    }
    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
        vertical-align: middle;
    }
    input {  
        width: 100%;
    }
    .hidden {
        display:none;
    }
</style>
<body>
    <table>
        <tbody>
            <tr>
                <th>Heading 1</th>
                <th>Heading 2</th>
                <th>Heading 3</th>
            </tr>
            <tr class="even">
                <td>Example Text<td>
                <td>Example Text<td>
                <td><form action="mailto:example@email.com?"><input type="hidden" name="Subject" value="Title with lots of spaces"/><input type="hidden" name="body" value="Body with lots of spaces"/><input type="submit" value="Email" /></form></td>
            </tr>
            <tr>
                <td>Example Text<td>
                <td>Example Text<td>
                <td><form action="mailto:example@email.com?"><input type="hidden" name="Subject" value="Title%20with%20lots%20of%20spaces"/><input type="hidden" name="body" value="Body%20with%20lots%20of%20spaces"/><input type="submit" value="Email" /></form></td>
            </tr>
        </tbody>
    </table>
</body>

我在该示例中的两个按钮应分别生成以下URL。

  

的mailto:example@email.com主题=标题+与+大量+的+空格&安培;机体+与+很多+空格+

?      

的mailto:?example@email.com主题=标题%2520with%2520lots%2520of%2520spaces&安培;机体%2520with%2520lots%2520of%2520spaces

我意识到JavaScript可能会解决此问题,但Google协作平台将HTML Box的内容放在类似于iframe的shell中。这将阻止从shell内部打开新选项卡,从而停止电子邮件弹出窗口。

有没有办法使用我的变通表单提交空格,还是有一种简单的方法可以在Google网站上使用JavaScript打开电子邮件?

任何帮助都会受到赞赏,我希望我在平台上可以实现的目标是可以实现的。

1 个答案:

答案 0 :(得分:0)

我设法让它运转起来......

解决方案

我尝试使用JavaScript,但由于Google协作平台上的保护,我不允许我打开新标签页。我找到了一篇大多数人可能觉得有用的文章:http://blog.ncce.org/2013/12/10/put-javascript-into-google-sites/ 通过使用此解决方案,您应该能够使用JavaScript导航到不同的网页,使用警报等。

我无法使用这种方法。我这样做是为了工作,我的组织目前与Google签订合同,将对Google协作平台/ Google云端硬盘的所有访问限制为仅限组织内的用户。因此,该网站无法访问我上传的任何文件并产生错误。

我的解决方案

我提出的解决方案以某种方式绕过了我对其他解决方案的问题并允许我使用JavaScript将空格编码为%20(也允许我在加载后关闭额外的选项卡)。

我使用Google App Script显示一个HTML元素,其中包含一个使用JavaScript打开电子邮件URL的按钮。 您可以使用以下指南向您的网站添加Google App脚本: https://support.google.com/sites/answer/1224162?hl=en

Google Apps脚本对我来说是新的,所以有几点注意事项:

  1. 我花了很长时间才找到东西...... Cog - &gt;管理网站 - &gt;应用脚本
  2. 要运行脚本保存文件,另存为新版本(文件 - &gt;管理版本 - &gt;新版本),然后发布这些更改(发布 - &gt;部署为Web应用程序)
  3. 我的代码

    Code.gs:

    function doGet() {
        return HtmlService
        .createTemplateFromFile('Index')
        .evaluate();
    }
    

    的index.html:

    <!DOCTYPE html>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            max-width: 1000px;
        }
    
        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
            vertical-align: middle;
        }
    
        tr.even {
            background-color: #dddddd;
        }
    
        button {  
            width: 100%;
        }
    </style> 
    <html>
        <head>
            <base target="_top">
        </head>
        <body>
            <table>
                <tbody>
                    <tr>
                        <th>Category</th>
                        <th>Descrition</th>
                        <th>Submit</th>
                    </tr>
                    <tr class="even">
                        <td>Example Text</td>
                        <td>Example Text</td>
                        <td><button onclick="var x = window.open('mailto:example@email.com?Subject=Title%20with%20lots%20of%20spaces&Body=Body%20with%20lots%20of%20spaces'); setTimeout(function () { x.close();}, 500);">Email</button></td>
                    </tr>
                </tbody>
            </table>
        </body>
    </html>
    

    希望这有助于人们。