web-dev-qa-db-ja.com

新しいタブ/ウィンドウでhref mailtoリンクを開きます

クリックすると、mailtoにリンクする画像があります。

 <a id="mailto" href="mailto:[email protected]" target="_newtab" >
        <img src="@Url.Content("~/Content/HomePage/email.png")" alt="email" /></a>

ただし、現在クリックすると、メールオプションを起動してmailtoアプリケーションを選択し、選択すると、現在のタブでmailtoリンクが開きます。これにより、ユーザーはアプリケーションを離れます。

そのため、ページに（Gmail、yahooなどで）メールを送信して、新しいタブまたはウィンドウで開くようにします。これを行う方法はありますか？ target = "_ newtab"とtarget = "_ blank"の両方を試しましたが、両方とも機能しませんでした。

どんな助けも大歓迎です..ありがとう...

（他に方法がない場合はjQueryメソッドも使用できます、ありがとう）

jqueryrazorhreftargetmailto
20
shennyL

mailtoは、ユーザーのデフォルトの電子メールクライアントを呼び出します。どのインスタンスでもウィンドウやタブは開きません。ウィンドウまたはタブを使用する場合は、フォームを構成し、フォームをウィンドウ/タブで開くことができるようにする必要があります。もちろん、サーバーで使用可能な方法でメールを送信するようにフォームを構成する必要があります。

12
Scott

この情報は古くなっていますが、Gmailや他の人がブラウザのリンクを介して動作するようになったため、そうすることが可能になりました。ただし、システムメールクライアントで開かない場合は新しいタブでのみ開き、ウェブメールクライアントの場合は新しいタブで開くようにしたいという問題があります。そうでない場合、たとえばOutlookユーザーには空白のタブが表示されますこれは、特にOutlookユーザーであるため、見当違いです。

27
RedScourge

この回答は、この回答に基づいています 新しいタブ/ウィンドウでhref mailtoリンクを開きます 。

現在、新しいブラウザはsomeWebメールインターフェイス（Gmail、Yahooメール、AoLなど）をサポートしています。

したがって、preventDefaultとデフォルトのリンクリダイレクトを使用して、新しいウィンドウを開き（古いブラウザをサポートし、新しいブラウザは新しいタブを開くだけです）、フォールバックを追加できます（非JavaScriptユーザーの場合）。

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-cancelation

https://developer.mozilla.org/es/docs/DOM/event.preventDefault

https://developer.mozilla.org/en-US/docs/Web/API/Window.open

そのようです：

<a onClick="javascript:window.open('mailto:[email protected]', 'mail');event.preventDefault()" href="mailto:[email protected]">Send a e-mail</a>

http://jsfiddle.net/cNUNP/

https://stackoverflow.com/a/9880404/110702 へのクレジット

それだけだと思います。

あいさつ、マルコス。

18
Marcos Eusebi

これにはJavascript/Jqueryは必要ありません。標準のリンクが機能します（バグによるFirefox v30 +を除く、以下を参照）。

<a href="mailto:[email protected]" target="_blank">

Firefox 30以降、 バグ が原因でFirefoxで動作しません。同じタブで開き、履歴を置き換えますので、戻ると、mailto：リンクがあったページに戻りません。

15
Costa

これは古い質問ですが、見つかった場合、このスレッドには最良の回答がありました。上記のMarcosの回答を変更して、クライアントに外部メールハンドラーがある場合に作成される空白のタブも閉じるようにしました

参照回答

JS（イベントハンドラーのw\jQuery）

$(document).on('click', 'a[href^=mailto]', function(e) {
  var checkClose, checkLoaded, event, href, i, len, loadEvents, results, t, wndw;
  e.preventDefault();
  href = this.href;
  wndw = window.open(href, 'mail');
  checkClose = function() {
    console.log('checkClose');
    try {
      wndw.location.href;
      return wndw.close();
    } catch (error) {
      return console.log('webmail');
    }
  };
  t = setTimeout(checkClose, 5000);
  try {
    checkLoaded = function() {
      console.log('loaded');
      clearTimeout(t);
      return t = setTimeout(checkClose, 2000);
    };
    wndw.onload = checkLoaded;
    loadEvents = ["DomContentLoaded", "load", "beforeunload", "unload"];
    results = [];
    for (i = 0, len = loadEvents.length; i < len; i++) {
      event = loadEvents[i];
      results.Push(wndw.addEventListener(event, checkLoaded));
    }
    return results;
  } catch (error) {
    return checkLoaded();
  }
});

jsfiddle

3
Sampson Crowley

バリアント1（JavaScript）：

<script>
// Open mailto links in a new tab
function mailto(email, subject, body) {
    var url;
    url = 'mailto:' + email;
    url += '?subject=' + subject;
    url += '&body=' + body;
    window.open(url);
}
</script>

<a href="#" onclick="mailto('[email protected]', 'Subject', 'Body');event.preventDefault()">[email protected]</a>

バリアント2（JavaScript）：

<script>
// Open mailto links in a new tab
function mailto(th) {
    var url = th.getAttribute('href');
    window.open(url);
}
</script>

<a href="mailto:[email protected]?subject=Subject&body=Body" onclick="mailto(this);event.preventDefault()">[email protected]</a>

バリアント3（jQuery）：

<script>
// Open mailto links in a new tab
$('#mailto').click(function (e) {
    e.preventDefault();
    var url = $(this).attr('href');
    window.open(url);
});
</script>

<a href="mailto:[email protected]?subject=Subject&body=Body" id="mailto">[email protected]</a>

バリアント4（jQuery）：

<script>
// Open mailto links in a new tab
$("a[href^='mailto:']").click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');
    var target = $(this).attr('target');
    window.open(href, target ? target : '_self');
});
</script>

<a href="mailto:[email protected]?subject=Subject&body=Body" target="_blank">[email protected]</a>

HTMLターゲット属性： https://www.w3schools.com/tags/att_a_target.asp

1
Botyk