mailto using javascript

Question

I want to open a new outlook mail template with the 'To address' whenever a user clicks an image. I have return my code in a html page(linked with the image), whenever it loads the javascript should open a new mail template. But the functionality is not working. Kindly let me know what is wrong in my code.

body onLoad="redirect()"

script language="JavaScript"

function redirect() 

      var email = "xyz@something.com"
      var mailto_link = 'mailto:' + email
      window = window.open(mailto_link, 'emailWindow')
      if (window && window.open && !window.closed)         
          window.close()

`window` is a read-only variable. – Rob W Apr 16 '12 at 10:38 — Rob W, Apr 16 '12 at 10:38
Is it because of a popup blocker? – Ramesh Apr 16 '12 at 10:39 — Ramesh, Apr 16 '12 at 10:39

score 96 · Answer 1 · edited Oct 09 '17 at 19:43

96

No need for jQuery. And it isn't necessary to open a new window. Protocols which doesn't return HTTP data to the browser (mailto:, irc://, magnet:, ftp:// (<- it depends how it is implemented, normally the browser has an FTP client built in)) can be queried in the same window without losing the current content. In your case:

function redirect()
{
    window.location.href = "mailto:mail@example.org";
}
<body onload="javascript: redirect();">

Or just directly

<body onload="javascript: window.location.href='mailto:mail@example.org';">

edited Oct 09 '17 at 19:43

answered Jul 18 '13 at 12:25

StanE

2,704
29
38

2

It should be noted, that the browser will still trigger the `onbeforeunload`-Event: `window.onbeforeunload = () => {console.log("onbeforeunload")}; window.location.href = "mailto:mail@example.org";` – D B May 09 '18 at 07:40
@DB Thanks for pointing this interesting detail out! This makes sense... I guess, because, like I previously said, the browser might have a build-in tool for handling pseudo-protocols, like ftp://. This would indeed replace the current page contents, so the onbeforeunload event is fired, even if there is no built-in tool in the browser to handle mailto:// URIs. But this is just a personal assumption. In this case, the browser vendors should check first, if they support the pseudo-protocol, otherwise not firing the onbeforeunload event. – StanE Aug 11 '19 at 18:08
@cjm2671 I tested the above code in the current newest Chrome version 76.0.3809.100 in normal mode and incognito mode. Everything works fine. Do you have any browser extensions (AddOns), which might prevent the code execution? – StanE Aug 11 '19 at 18:13

Ramesh · Answer 2 · 2021-01-21T10:55:20.263

Please find the code in jsFiddle. It uses jQuery to modify the href of the link. You can use any other library in its place. It should work.

HTML

<a id="emailLnk" href="#">
    <img src="http://ssl.gstatic.com/gb/images/j_e6a6aca6.png">
</a>

JS

$(document).ready(function() {
    $("#emailLnk").attr('href',"mailto:xyz@something.com");
});

UPDATE

Another code sample, if the id is known only during the click event

$(document).ready(function() {
    $("#emailLnk").click(function()
     {
         window.location.href = "mailto:xyz@something.com";
     });
});

score 24 · Answer 3 · edited Jul 23 '19 at 20:01

24

With JavaScript you can create a link 'on the fly' using something like:

var mail = document.createElement("a");
mail.href = "mailto:mail@example.org";
mail.click();

This is redirected by the browser to some mail client installed on the machine without losing the content of the current window ... and you would not need any API like 'jQuery'.

edited Jul 23 '19 at 20:01

Stevoisiak

23,794
27
122
225

answered Mar 29 '18 at 15:24

GuerraTron

469
4
5

1

`window.open('mailto')` normally leaves a blank tab open with mailto in the URL so this way seems much nicer – Unknownweirdo Jul 17 '18 at 09:58

score 5 · Answer 4 · edited Mar 18 '14 at 08:16

5

You can use the simple mailto, see below for the simple markup.

<a href="mailto:name@gmail.com">Click here to mail</a>

Once clicked, it will open your Outlook or whatever email client you have set.

edited Mar 18 '14 at 08:16

juankysmith

11,839
5
37
62

answered Jan 30 '14 at 03:10

Allan

630
7
7

Hey Grant, thanks for editing my terminology to used. I'm in hurry too type. – Allan Feb 03 '14 at 09:54

score 4 · Answer 5 · answered Dec 06 '13 at 16:47

I've simply used this javascript code (using jquery but it's not strictly necessary) :

    $( "#button" ).on( "click", function(event) {
         $(this).attr('href', 'mailto:me@domain.com?subject=hello');
    });

When users click on the link, we replace the href attribute of the clicked element.

Be careful don't prevent the default comportment (event.preventDefault), we must let do it because we have just replaced the href where to go

I think robots can't see it, the address is protected from spams.

score 1 · Answer 6 · answered Oct 10 '21 at 20:21

1

document.location.href = "mailto:chrisgreg23@googlemail.com"

answered Oct 10 '21 at 20:21

Dan George

105
1
2

3

[A code-only answer is not high quality](//meta.stackoverflow.com/questions/392712/explaining-entirely-code-based-answers). While this code may be useful, you can improve it by saying why it works, how it works, when it should be used, and what its limitations are. Please [edit] your answer to include explanation and link to relevant documentation. – Stephen Ostermiller Oct 11 '21 at 09:09

score -1 · Answer 7 · answered Apr 24 '20 at 07:19

I don't know if it helps, but using jQuery, to hide an email address, I did :

    $(function() {
        // planque l'adresse mail
        var mailSplitted 
            = ['mai', 'to:mye', 'mail@', 'addre', 'ss.fr'];

        var link = mailSplitted.join('');
        link = '<a href="' + link + '"</a>';
        $('mytag').wrap(link);
    });

I hope it helps.

mailto using javascript

7 Answers7

Linked

Related