Safari mailto：“此网站已被阻止自动撰写电子邮件。”答案

【问题标题】：Safari mailto: "This website has been blocked from automatically composing an email."Safari mailto：“此网站已被阻止自动撰写电子邮件。”
【发布时间】：2017-06-24 10:38:38
【问题描述】：

当使用 Safari (iOS 10.2) 并单击 mailto 链接时，会显示确认提示并显示以下消息：

“该网站已被阻止自动撰写电子邮件。” 忽略/允许

我想在我自己的网站上摆脱这个问题，但不知道该怎么做。它可以通过 Safari 复制，例如在任何 BBC 文章上单击邮件图标。

Screenshot of dialogue on iPad

我的网络研究将我带到了这些链接：

https://discussions.apple.com/thread/7763735

WillieFromColo 2017 年 1 月 11 日上午 8:25 回复 Russ G

Safari 的问题和“该网站已被阻止自动撰写电子邮件。”

我对 Google 的研究表明，此错误类型消息开始于大约在 11 月发生，对 Safari 进行了更新，这可能与 Apple 对 iOS 10.2 的更新同时发生。截至今日 (1/11/17) 这是适用于 iPad 的最新版本的 iOS，也许 iPhone 也是。

[...]

和

https://developer.apple.com/safari/technology-preview/release-notes/#r15

第 15 版 网址处理

导航到 tel: 和 mailto: 链接现在需要用户手势；没有用户手势的导航将显示确认提示

所以它看起来像是 Safari 的“功能”。有谁知道如何防止这个提示？

【问题讨论】：

根据您最后的报价，使用用户手势。（一个可以点击的按钮，一个可以滚动的东西……）
我有一个普通的 html、vanilla javascript 和那么我可以做些什么来避免 Safari 上出现这个烦人的警报

标签： html safari mailto

【解决方案1】：

各种第三方 JavaScript 库将拦截对 a 标签的点击，以防止在向服务器发送数据时短暂导航。通常，它们通过window.location.replace 以编程方式触发导航。

这种方式触发mailto/tel链接时Safari中的变化会弹出警告。

有交互，但通常使用preventDefault 停止，Safari 不在乎。

如果您使用的库导致此问题，请联系创建者并查看他们是否可以更新它以跳过 mailto/tel 链接上的 preventDefault。

【讨论】：

我们用于报告错误的后备系统使用动态生成的 mailto 链接，而且似乎不仅 preventDefault 会导致此问题，而且会在单击之后但在事件触发之前更改 href 位置导致此行为。跨度>
在我的上下文中，这似乎是由 HTML 而不是 Javascript 引起的。有问题的标签基本上是这样的：<a href="mailto:email@email.com">email@email.com</a>.
@ChrisPrince 正确，标签是正确的，问题是事件侦听器可以侦听该标签上的点击，并修改结果，以便 href 后面不跟“用户交互”但是而是通过 JavaScript 在点击后更改 window.location。
我在点头。我发现了第二个例子，证实了你所说的。在我的另一个网站中，我有相同的锚标记/mailto 链接，它不会在 Safari/mobile 中导致这种行为。所以，我正在深入研究你的假设。谢谢！
在我的情况下，肯定有一个事件监听器附加到锚标记。正在考虑删除它。

【解决方案2】：

我最初没有提到的是我们从页面的 JavaScript 部分调用了 mailto。现在，我们再次尝试通过更改为基于 HTML 标记的 mailto（带有 to 和 subject）来解决该问题，并且它现在以某种方式在没有该对话框的情况下工作。所以我认为这个问题已经为我自己解决了，但我愿意接受任何解释原因的提示。因此，到目前为止，我不会将此答案标记为解决方案。

【讨论】：

【解决方案3】：

发生在用户身上，因为我们使用window.open(...) 在新窗口中打开该链接。

替换为 window.location.href = ... 仅适用于 Safari :facepalm:。

【讨论】：

【解决方案4】：

我们遇到了类似的问题 - 并已确定该问题是通过 Google 跟踪代码管理器触发的。

具体来说，我们在所有包含mailto: 前缀的href 元素上触发事件（在跟踪代码管理器中）。我们将事件更改为通过单击锚标记内的嵌套 <span> 元素来触发。

这允许在跟踪代码管理器中跟踪事件并删除有问题的用户提示。例如。

<a href="mailto:person@example.com"><span>link text</span></a>

【讨论】：

【解决方案5】：

我们在使用 Google 跟踪代码管理器跟踪 mailto-Links 时遇到了这个问题。

我找到了一个不修改 dom 的解决方案。

我们使用“等待标记”选项激活了触发类型“点击 - 仅链接”，“最长等待时间”为 2000 毫秒。 p>

禁用此选项后，该消息不再显示。另一种解决方案是使用“点击 - 所有元素”（这总是有效的）。

【讨论】：

【解决方案6】：

这里的解决方案都不起作用。有一个插件/脚本将自身附加到导致此行为的单击事件。我终于用 jquery 用 jQuery 创建了mailto: 链接。

以这种方式在html中添加电子邮件

<span class="email-link">email@email.com</span>

并添加此 jquery 以将 <span> 转换为链接

$(function() {
  $( ".email-link" ).each(function( index ) {
    var a = $('<a />');
    var link = $( this ).text();
    a.attr('href', 'mailto:' + link );
    a.text(link);
    $( this ).html(a);
  });
});

这样您可以避免任何附加到 mailto 链接点击事件的外部脚本。

【讨论】：