如何通过 Google 站点上的按钮发送电子邮件(包含空格)?

How can I send an email (containing spaces) through a button on Google Sites?

我需要编写一个按钮,单击该按钮可在用户计算机上打开一封电子邮件。听起来很简单,但我遇到了很多麻烦,我正在使用 Google 站点并且我的代码位于 HTML 框中以允许使用 CSS。我目前有一些按钮可以打开电子邮件,但我无法让电子邮件中的空格像普通空格一样工作。

我最初尝试制作一个表单按钮以提交到网页,该表单在初始“?”之后截断了所有内容。在 URL。当我意识到我要问的是什么时,就说得通了。我在电子邮件中添加了额外的隐藏表单元素,其中包含我想要的标题内容和 body。通过使用这种方法,我看不到允许将空格放入 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>

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

mailto:example@email.com?Subject=Title+with+lots+of+spaces&Body+with+lots+of+spaces

mailto:example@email.com?Subject=Title%2520with%2520lots%2520of%2520spaces&Body%2520with%2520lots%2520of%2520spaces

我意识到 JavaScript 可能会解决这个问题,但 Google 站点将 HTML 框的内容放入 shell 类似于 iframe。这会阻止从 shell 内部打开新标签页,从而阻止电子邮件弹出窗口。

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

如有任何帮助,我将不胜感激,我希望我正在尝试做的事情可以在平台上实现。

我设法让它工作...

一个解决方案

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

我无法使用此方法。我这样做是为了工作,我的组织目前与 Google 签订了合同,该合同将对 Google Sites/Google 驱动器的所有访问权限仅限于组织内的人员。因此,网站无法访问我上传的任何文件并产生错误。

我的解决方案

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

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

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

  1. 我花了很长时间才找到这个东西...齿轮 -> 管理站点 -> 应用程序脚本
  2. 为了运行脚本保存你的文件,另存为新版本(文件 -> 管理版本 -> 新版本)然后发布这些更改(发布 -> 部署为 Web App)

我的代码

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>

希望这对人们有所帮助。