如何让 mailto 在 android chrome 上工作？

Question

所以我在这里看到了几个关于 mailto 无法在 android 上工作的问题，我的问题比那更具体一些。我的网站有一个 mailto link 设置作为提交按钮，可以将我网站上填写的表格直接发送到我的电子邮件。 link 在 chrome 和 firefox 中的桌面上工作得很好，并且还经过测试并在 iPhone 8+ 上工作。然而，在我的三星 Note 8 上，这个按钮在 Chrome 中完全没有任何作用。我认为它只是 android，所以我决定在三星的本地互联网服务上测试它，它工作得很好！所以它适用于 Chrome 的桌面版本和 Android 上的非 chrome 网络浏览器...Android 上的 Chrome 浏览器有一些特别之处] 这与我的 mailto link.

不合

旁注：我在其他地方读到，将 "target="_top" 添加到 mailto link 使其在 Android 设备上工作。这对我不起作用。

我的 mailto link 嵌套在我的网页的表单声明中（我怀疑可能有一部分在我的 "target="_top" 没有帮助？）并且写成:

<form class="questionnaire" action="mailto:carl@cuttingedgelighting.com?Subject=New%20Vendor" target="_top" method="post" enctype="text/plain">

我不确定还有哪些其他代码片段可能有用，请告诉我，我很乐意 post 满足您的任何需求。谢谢！

Answer 1

在发件人中使用 mailto 通常不可靠，所以这主要是 chrome 移动设备 The Mythical Mailto 的兼容性问题。

最好和最优雅的解决方案是处理表单请求服务器端而不是发送电子邮件。

然而，另一个不太优雅的解决方案是在页面中添加一个隐藏的锚标记，在 JS 中捕获事件，动态构建 mailto href，将 link 附加到锚标记 href 属性，然后使用 JavaScript 触发锚标记点击。请参阅下面的 JS fiddle。在 chrome 手机上测试。

$('.questionnaire').on('submit', function(e) {

  var messageBody = '';
  $.each($('.questionnaire').serializeArray(), function(i, field) {
    messageBody += field.name + ": " + field.value + '%0D%0A';
  });

  var hreflink = "mailto:carl@cuttingedgelighting.com?Subject=New%20Vendor&body=" + messageBody;
  $('.mail').attr("href", hreflink);
  e.preventDefault();
  $('.mail')[0].click()

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="questionnaire" target="_top" method="post" enctype="text/plain">


  First name:<br>
  <input type="text" name="firstname" value="Foo">
  <br> Last name:<br>
  <input type="text" name="lastname" value="bar">
  <br><br>
  <input type="submit" value="Submit">
</form>

<a class="mail" href="mailto:someone@example.com?Subject=Hello%20again" target="_top" style="display: none;">Send Mail</a>

如何让 mailto 在 android chrome 上工作？

How to get mailto working on android chrome?

html

mailto

android

google-chrome