仅当Web邮件客户端时,Mailto链接才会在新选项卡中打开

时间:2017-07-27 19:36:04

标签: javascript html

我有一个网页,可以创建联系人列表及其电子邮件地址。 mailto链接有两个选项,(1)在当前窗口中打开它或(2)在新的选项卡/窗口中打开它。

我发现双方都存在潜在的弊端:

  • 对于网络邮件客户端(例如gmail),选项1并不理想,因为它当时劫持了窗口,用户必须以某种方式导航回应用程序
  • 对于桌面邮件客户端,第一个选项并不理想,因为现在您打开了一个空白窗口/选项卡

无论如何都要"检测"如果打开的网页有内容,如果没有则关闭它?

基于此链接:

Detecting web-based mail client vs local mail client for a mailto link

我尝试了以下操作来获取body

const windowRef = window.open(`mailto:${email}`, '_blank')
const body = windowRef.document.body

我遇到的问题是每个文档的body都是空的:<body></body>

我认为这是因为它没有足够的时间来加载页面,所以我尝试setTimeout但后来我得到了Blocked a frame with origin "myhostman" from accessing a cross-origin frame.

有关支持网络和桌面邮件客户端的方法的任何想法没有上面列出的缺点吗?

1 个答案:

答案 0 :(得分:6)

这很蹩脚,但可能做你需要的事情:

您可以像这样定义SendEmail()函数:

<击>

<击>
function SendEmail() {
    const windowRef = window.open(`mailto:email@address.com`, '_blank');

  windowRef.focus();

  windowRef.onfocus = function() {
    return;
  } 

  setTimeout(function(){
    windowRef.close();
  },500);
}

<击> 你的html看起来像这样:

<a href="javascript:void(0)" onclick="SendEmail();">email</a>

这背后的想法是,如果您的用户将网络邮件作为其默认电子邮件客户端,则function将退出;但是,如果用户有桌面电子邮件客户端,新窗口将失去焦点,触发setTimeout()关闭新打开的窗口。

我的测试使用此JSFiddle 效果很好,但是&#34;一半&#34;测试,我的意思是,因为我没有将webmail客户端设置为我的默认客户端,所以我无法确认这实际上是否可以正常工作,但我可以确认我的桌面电子邮件客户端时窗口已关闭打开...

<强>更新

忘记上面的功能,我稍微修改了一下:

function SendEmail() {
  const windowRef = window.open(`mailto:email@address.com`, '_blank');

  windowRef.focus();

  setTimeout(function(){
    if(!windowRef.document.hasFocus()) {
        windowRef.close();
    }
  }, 500);

}

我通过设置Gmail和Yahoo!在Firefox中对此进行了测试作为我的默认电子邮件客户端,新打开的标签仍然打开;然后我将其更改回我的桌面电子邮件客户端,并关闭了新打开的标签页。我使用Vivaldi和IE Edge(我的桌面客户端设置为默认值)进行了相同的测试,结果成功相同。这是更新的JSFiddle