[英]How to Create a Mailto Share Button that Opens a Window in which Ones Can Enter Email Address to Send to
I've been searching all over the internet to find out how to create a mailto
share button that opens up a new window in which the user can then type in the email address of his choice to send to. 我一直在Internet上进行搜索,以了解如何创建
mailto
共享按钮,该按钮会打开一个新窗口,然后用户可以在其中键入要发送到的电子邮件地址。 I've an attached a sequential set of images as operational example: 我附带了一组顺序的图像作为操作示例:
What is the trick to this? 这有什么窍门? Why can't I find any info on how to write such code ....absolutely nowhere on Stack Overflow either!
为什么我找不到有关如何编写此类代码的任何信息....在堆栈溢出中也绝对不存在!
As of right now this is the code that I have: 截至目前,这是我拥有的代码:
$('.share-page-on-Email').click(function() {
window.open("mailto:"+emailTo+'?cc='+emailCC+'&subject='+emailSub+'&body='+emailBody, '_self');
});
View my prototype Email share button at my Code Pen here: https://codepen.io/IDCoder/full/rpdBQJ/ 在我的代码笔上查看我的原型电子邮件共享按钮: https : //codepen.io/IDCoder/full/rpdBQJ/
Thanks in advance for your help! 在此先感谢您的帮助!
您可以像这样使用window.location.href:
window.location.href = 'mailto:email@domain.com'
I recommend never using that mailto: feature as it behaves unpredictably, different on different devices and sometimes fails alltogether. 我建议不要使用该mailto:功能,因为它的行为异常,在不同的设备上有所不同,有时会一起失败。 You could create a page just to take the email string then do whatever you want with it server side.
您可以创建一个页面以仅接收电子邮件字符串,然后在服务器端执行任何操作。 Make the popup/popover small like:
将弹出/弹出窗口缩小,例如:
<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>
You can use navigator.registerProtocolHandler()
to set specific domains to handle specific protocols as demonstrated by @PaulIrish at Getting Gmail to handle all mailto: links with registerProtocolHandler . 您可以使用
navigator.registerProtocolHandler()
设置特定的域来处理特定的协议,如@PaulIrish在“ 获取Gmail来处理所有mailto:registerProtocolHandler的链接”中所展示的。
.registerProtocolHandler()
must be called at the origin where the protocol is to be handled by the web application, else an error occurs. 必须在要由Web应用程序处理协议的原始位置调用
.registerProtocolHandler()
。否则会发生错误。
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.
如果所得的URL记录的来源与此NavigatorContentUtils对象的相关设置对象指定的来源不同,则用户代理必须引发“ SecurityError” DOMException。
For example, you can navigate to "https ://mail.google.com/mail/#inbox", then at console
例如,您可以导航到“ 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!&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();
which should launch a window
having title "Compose Mail", with Subject and Body populated. 这将启动一个标题为“撰写邮件”的
window
,并填充“主题”和“正文”。
To include "cc" you can place 要包含“ cc”,您可以放置
cc=email@domain.com&
within the string following last 在最后一个字符串之后
&
on the 在
?subject=
line, see mailto with multiple cc addresses . 行,请参阅具有多个抄送地址的mailto 。
Or write the service for your own online email application to achieve the same handling of requests for specific protocols. 或者为您自己的在线电子邮件应用程序编写服务,以实现对特定协议请求的相同处理。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.