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

Question

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

这是什么技巧？为什么我找不到关于如何编写此类代码的任何信息......在 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/

在此先感谢您的帮助！

Answer 1

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

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

Answer 2

我建议永远不要使用 mailto: 功能，因为它的行为不可预测，在不同的设备上有所不同，有时会完全失败。你可以创建一个页面来获取电子邮件字符串，然后在服务器端做任何你想做的事。将 popup/popover 变小，例如：

<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 在 Getting Gmail to handle all mailto: links with registerProtocolHandler.

所展示的那样

.registerProtocolHandler() 必须在 Web 应用程序处理协议的源头调用，否则会出错。

User agents must throw a "SecurityError" DOMException if the resulting URL record has an origin that differs from the origin specified by the relevant settings object of this NavigatorContentUtils object.

例如，您可以导航至 "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，标题为 "Compose Mail"，主题为 Body。

要包含 "cc"，您可以放置

cc=email@domain.com&amp;

在最后一个

之后的字符串中

&amp;

在

?subject=

行，见mailto with multiple cc addresses.

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

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

How to Create a Mailto Share Button that Opens a Window in which Ones Can Enter Email Address to Send to

javascript

mailto

window.open