如何让mailto在android chrome上工作？答案

【问题标题】：How to get mailto working on android chrome?如何让mailto在android chrome上工作？
【发布时间】：2019-05-14 18:56:46
【问题描述】：

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

旁注：我在其他地方读到，将“target="_top”添加到 mailto 链接可以使其在 Android 设备上运行。这对我不起作用。

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

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

我不确定还有哪些其他代码可能会有所帮助，请告诉我，我很乐意发布您可能需要的任何内容。谢谢！

【问题讨论】：

标签： android html google-chrome mailto

【解决方案1】：

在 from 中使用 mailto 一般不可靠，所以多半是与 chrome mobile The Mythical Mailto 的兼容性问题。

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

然而，另一个不太优雅的解决方案是向页面添加隐藏的锚标记，在 JS 中捕获事件，动态构建 mailto href，将链接附加到锚标记的 href 属性，然后使用触发锚标记单击JavaScript。请参阅下面的 JS 小提琴。在 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>

【讨论】：