如何创建一个 Mailto 共享按钮，该按钮打开一个窗口，人们可以在其中输入电子邮件地址以发送到答案

【问题标题】：How to Create a Mailto Share Button that Opens a Window in which Ones Can Enter Email Address to Send to如何创建一个 Mailto 共享按钮，该按钮打开一个窗口，人们可以在其中输入电子邮件地址以发送到
【发布时间】：2018-01-24 20:51:47
【问题描述】：

我一直在互联网上搜索，以了解如何创建mailto 共享按钮，该按钮会打开一个新窗口，然后用户可以在其中输入他选择的电子邮件地址以发送到。我附上了一组连续的图像作为操作示例：

这有什么诀窍？为什么我找不到任何关于如何编写此类代码的信息......在 Stack Overflow 上也绝对找不到！

到目前为止，这是我拥有的代码：

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

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

提前感谢您的帮助！

【问题讨论】：

预期结果是什么？
@guest271314，没有任何反应。
“什么都没有发生”没有回答预期会发生什么。有什么要求？
什么意思？仅创建表单是最终的预期结果吗？您不希望启动本机系统电子邮件应用程序吗？您是否已经编写了处理mailto: 的基于Web 的电子邮件应用程序？当访问者按下“发送”时，您预计会发生什么？
如果您只是将 mailto 链接设置为<a href="mailto:">Send Mail</a> 或<a href="mailto:?subject=Help">Get Help</a>，它将弹出用户首选的本地邮件程序，而没有预先设置To: 地址。如果你想要你所描绘的，那不是mailto: 所做的——这是一个你自己创建的表单，当它被提交时，在后端创建一个电子邮件。在服务器上创建和发送电子邮件取决于您在服务器上使用的技术堆栈。

标签： javascript mailto window.open

【解决方案1】：

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

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

【讨论】：

在我的代码中我应该把window.location.href = 'mailto:email@domain.com' 放在哪里？
这不会打开一个新的浏览器窗口，然后启动用户的本机电子邮件程序吗？然后，您将关闭一个空的浏览器窗口。好奇的;我没试过。（刚刚试过......不，它只是打开邮件客户端。但是，为什么这是一个普通的<a href="mailto:email@domain.com">链接？）

【解决方案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>

【讨论】：

天啊！谢谢你！
当我在 CodePen([codepen.io/IDCoder/full/rpdBQJ/]) 的 JavaScript 页面上将此代码与我的其余代码组合时，这些代码将停止工作。这是为什么？另外，有没有办法，而不是<a href="/my-email-collector-page" onclick="window.open，我可以有这样的东西：$('.class name here').click(function() { window.open(other code here});？

【解决方案3】：

您可以使用navigator.registerProtocolHandler() 设置特定域来处理特定协议，正如@PaulIrish 在Getting Gmail to handle all mailto: links with registerProtocolHandler 中所展示的那样。

.registerProtocolHandler() 必须在 Web 应用程序要处理协议的源点调用，否则会发生错误。

用户代理必须抛出 "SecurityError" DOMException 如果 resulting URL record 的 origin 与由 this 的相关设置对象指定的原点 NavigatorContentUtils 对象。

例如，您可以导航到“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&amp;

在最后一个字符串内

&amp;

关于

?subject=

行，见mailto with multiple cc addresses。

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

【讨论】：