如何创建一个Mailto共享按钮，该按钮会打开一个窗口，用户可以在其中输入要发送到的电子邮件地址

Question

我一直在Internet上进行搜索，以了解如何创建mailto共享按钮，该按钮会打开一个新窗口，然后用户可以在其中键入要发送到的电子邮件地址。 我附带了一组顺序的图像作为操作示例：

这有什么窍门？ 为什么我找不到有关如何编写此类代码的任何信息....在堆栈溢出中也绝对不存在！

截至目前，这是我拥有的代码：

 $('.share-page-on-Email').click(function() {
  window.open("mailto:"+emailTo+'?cc='+emailCC+'&subject='+emailSub+'&body='+emailBody, '_self');
   });

在我的代码笔上查看我的原型电子邮件共享按钮： https : //codepen.io/IDCoder/full/rpdBQJ/

在此先感谢您的帮助！

Answer 1

您可以像这样使用window.location.href：

window.location.href = 'mailto:email@domain.com'

Answer 2

我建议不要使用该mailto：功能，因为它的行为异常，在不同的设备上有所不同，有时会一起失败。 您可以创建一个页面以仅接收电子邮件字符串，然后在服务器端执行任何操作。 将弹出/弹出窗口缩小，例如：

<a href="/my-email-collector-page"
   onclick="window.open(this.href,'targetWindow',
                                   'toolbar=no,
                                    location=no,
                                    status=no,
                                    menubar=no,
                                    scrollbars=yes,
                                    resizable=yes,
                                    width=200px,
                                    height=120px');
 return false;">email</a>

Answer 3

您可以使用navigator.registerProtocolHandler()设置特定的域来处理特定的协议，如@PaulIrish在“ 获取Gmail来处理所有mailto：registerProtocolHandler的链接”中所展示的。

必须在要由Web应用程序处理协议的原始位置调用.registerProtocolHandler() 。否则会发生错误。

如果所得的URL记录的来源与此NavigatorContentUtils对象的相关设置对象指定的来源不同，则用户代理必须引发“ SecurityError” DOMException。

例如，您可以导航到“ https：//mail.google.com/mail/#inbox”，然后在console

navigator.registerProtocolHandler("mailto",
                                  "https://mail.google.com/mail/?extsrc=mailto&url=%s",
                                  "Gmail");

var email = `<a href="mailto:yourbestfriend@example.com?subject=registerProtocolHandler()%20FTW!&amp;body=Check%20out%20what%20I%20learned%20at%20http%3A%2F%2Fupdates.html5rocks.com%2F2012%2F02%2FGetting-Gmail-to-handle-all-mailto-links-with-registerProtocolHandler%0A%0APlus%2C%20flawless%20handling%20of%20the%20subject%20and%20body%20parameters.%20Bonus%20from%20RFC%202368!" target="_blank">this mailto: link</a>`;

document.body.insertAdjacentHTML("beforeend", email);

document.body.querySelector("a[href^=mailto]:nth-last-of-type(1)").click();

这将启动一个标题为“撰写邮件”的window ，并填充“主题”和“正文”。

要包含“ cc”，您可以放置

cc=email@domain.com& 

在最后一个字符串之后

&

在

?subject=

行，请参阅具有多个抄送地址的mailto 。

或者为您自己的在线电子邮件应用程序编写服务，以实现对特定协议请求的相同处理。