Question

所以我在这里看到了几个有关mailto不能在android上运行的问题，我的问题比这更具体。我的网站有一个mailto链接设置作为“提交”按钮，用于将在我的网站上填写的表格直接发送到我的电子邮件中。该链接在chrome和firefox桌面上正常工作，并且也经过了测试，并且可以在iPhone 8+上运行。但是，该按钮在我的Samsung Note 8的Chrome中绝对没有任何作用。我以为它只是android，所以我决定在Samsung的本地互联网服务上对其进行测试，并且效果很好！因此，它可以在台式机版的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">

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

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: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上正常工作？

1 个答案: