<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.0.3" src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
function addMailIframe() {
$('<iframe src="mailto:your@email.address?subject=Comments about the color blue">')
.appendTo('#myIframe')
.css("display", "none");
}
function addMailIframeSrcdoc() {
//var body = "<a href='mailto:your@email.address?subject=Comments about the color blue'>Contact us</a>";
var body = "";
var script = "<scr" + "ipt>" + "window.top.location = 'mailto:your@email.address?subject=Comments about the color blue';" + "</scr" + "ipt>";
$(`<iframe srcdoc="` + script + body + `">`)
.appendTo('#myIframeSrcdoc')
.css("display", "none")
;
}
</script>
</head>
<body>
<h1>Mailto</h1>
The first approach - using <a href> - is the simplest one but you sometimes have to deal with JavaScript instead of mere hyperlink.
Here are 3 other solutions to <strong>mailto</strong> issues.
<h2>Link</h2>
<!-- <a href="mailto:your@email.address?subject=Comments about the color blue">Contact Us</a> -->
<a target="_top" href="mailto:your@email.address?subject=Comments about the color blue">Contact Us</a>
<h2>window.open</h2>
<input type="button" onclick="window.open('mailto:your@email.address?subject=Comments about the color blue');" value="Contact us" />
<h2>Location href</h2>
<input type="button" onclick="window.location.href='mailto:your@email.address?subject=Comments about the color blue';" value="Contact us" />
<h2>(jQuery and) iFrame</h2>
<input type="button" onclick="addMailIframe();" value="Contact us" />
<div id="myIframe"></div>
<h2>(jQuery,) iFrame <a href="http://caniuse.com/#feat=iframe-srcdoc">srcdoc</a> and window.top.location</h2>
<input type="button" onclick="addMailIframeSrcdoc();" value="Contact us" />
<div id="myIframeSrcdoc"></div>
</body>
</html>