How to get mailto working on android chrome?

问题

So I've seen a couple questions on here about mailto not working on android, my problem is a little bit more specific than that. My website has a mailto link setup as a submit button to send forms filled out on my website straight to my email. The link works just fine on desktop in chrome and firefox, and was also tested and working on an iPhone 8+. However, the button did absolutely nothing in Chrome on my Samsung Note 8. I thought it was just android, so I decided to test it on Samsung's native internet service, and it worked just fine! So it works on the desktop version of Chrome and on non-chrome web browsers on Android...There's just something specifically about the Chrome browser on Android that isn't getting along with my mailto link.

Side note: I've read elsewhere that adding in "target="_top" to the mailto link gets it working on Android devices. This did not work for me.

my mailto link is nested in the form declaration of my web page (I suspect that may have a part in my the "target="_top" didn't help?) and is written as:

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

I'm not sure what other pieces of code may be helpful, let me know and I'll gladly post whatever you might need. Thank you!

回答1:

Using mailto in a from is generally not reliable, so it is mostly a compatibility issue with chrome mobile The Mythical Mailto.

The best and most elegant solution would to handle the form request server side instead of sending an email.

However, another less elegant solution would be adding a hidden anchor tag to the page, catching the event in JS, building the mailto href dynamically, appending the link to the anchor tag href attribute, and then triggering the anchor tag click using JavaScript. See JS fiddle below. Tested on chrome mobile.

$('.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>

来源：https://stackoverflow.com/questions/53763882/how-to-get-mailto-working-on-android-chrome

标签

android

html

google-chrome

mailto