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:carl@cuttingedgelighting.com?Subject=New%20Vendor" target="_top" method="post" enctype="text/plain">

我不确定其他哪些代码 fragment 可能有用，请告诉我，我很乐意发布您可能需要的任何内容。谢谢!

Answer 1

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

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

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