android - 如何让mailto在android chrome上工作？

Question

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

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

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

<form class="questionnaire" action="mailto:[e-mail]?Subject=New%20Vendor" target="_top" method="post" enctype="text/plain">

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

标签： androidhtmlgoogle-chromemailto

Answer 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:[e-mail]?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:[e-mail]?Subject=Hello%20again" target="_top" style="display: none;">Send Mail</a>